企业网站推广最有效的方法,房地产政策最新消息,渭南seo公司,蓝色大气网站源码理解实现代码的逻辑为主要#xff0c;代码怎么写为次要。 参考资料#xff1a; 《AngularJS入门与进阶》#xff0c;江荣波著 前端开发常用框架 React#xff1a;由Facebook开发#xff0c;用于构建用户界面的JavaScript库#xff0c;以组件化和虚拟DOM著称。 Angular代码怎么写为次要。 参考资料 《AngularJS入门与进阶》江荣波著 前端开发常用框架 React由Facebook开发用于构建用户界面的JavaScript库以组件化和虚拟DOM著称。 Angular由Google开发是一个完整的前端框架支持双向数据绑定、依赖注入等特性。 Vue.js一个轻量级、灵活的前端框架易于学习和上手支持响应式数据绑定。 jQuery虽然不像React、Angular和Vue.js那样是一个完整的框架但jQuery仍然是一个流行的JavaScript库用于简化DOM操作和处理事件。 Ember.js一个面向生产环境的前端框架提供了强大的工具和模式适用于复杂的Web应用程序。 Backbone.js一个轻量级的MVC框架用于给Web应用程序提供结构支持单页面应用开发。 AngularJS AngularJS是Google工程师研发的一款开放源代码的JavaScript框架使用JavaScript技术以HTML为模板语言并扩展HTML元素及属性同其他Web前端技术结合使用下载AngularJS的Release版本在HTML页面中使用script标签引入即可使用 https://code.angularjs.org AngularJS的重点内容 双向数据绑定AngularJS提供了双向数据绑定机制使得界面和数据模型之间的同步变得更加简单和高效。 MVC架构AngularJS采用了MVC模型-视图-控制器架构将应用程序的逻辑、数据和呈现分离帮助开发者更好地组织和维护代码。 模块化AngularJS支持模块化开发可以将应用程序划分为多个可重用的模块便于管理和扩展。 指令DirectivesAngularJS提供了丰富的指令可以用于扩展HTML功能、操作DOM元素、创建自定义标签等提高了开发效率和灵活性。 依赖注入AngularJS内置了依赖注入机制可以帮助开发者更好地管理组件之间的依赖关系。 单页面应用支持AngularJS适合构建单页面应用可以通过路由管理实现页面之间的切换而不需要重新加载整个页面。 一、双向数据绑定 双向数据绑定在视图DOM元素与作用域之间建立的数据同步机制界面的操作能实时同步到作用域中作用域中的数据修改也能实时回显到界面中指令 ng-model双向绑定实现作用域到视图的双向数据绑定ng-bind单向绑定实现作用域到视图的单向数据绑定 AngularJS表达式{{}}在AngularJS没有加载完也可能会执行直接输出表达式但ng-bind是在AngularJS加载完毕后都会执行输出解析过的表达式不用处理的用ng-bind需要处理的用表达式 1、直接使用表达式
!DOCTYPE html
!--ng-app放在html标签启动angularjs应用让angularjs管理整个页面--
html langen ng-app
headmeta charsetUTF-8titlech2_1/title!--引入angularjs库文件--script typetext/javascript srcangularjs.js/script
/head
body
!--ng-model通过iduname将界面中用户名输入框里的内容同变量uname双向绑定在一起--
!--ng-model指令添加在input标签中--
div用户名input typetext ng-modeluname//div
!--AngularJS会在作用域中添加一个uname属性和input输入框绑定--
!--angularjs会对{{}}里表达式的内容进行解析然后将结果输出到浏览器--
div{{uname}}/div
/body
/html
2、用ng-bind指令替换表达式
!DOCTYPE html
!--ng-app放在html标签启动angularjs应用让angularjs管理整个页面--
html langen ng-app
headmeta charsetUTF-8titlech2_1/title!--引入angularjs库文件--script typetext/javascript srcangularjs.js/script
/head
body
!--ng-model通过iduname将界面中用户名输入框里的内容同变量uname双向绑定在一起--
!--ng-model指令添加在input标签中--
div用户名input typetext ng-modeluname//div
!--用ng-bind指令可以避免浏览器直接输出未经解析的表达式--
div ng-binduname/div
!--或
div classng-bind:uname/div
--
/body
/html 二、MVC架构 MVC是一种软件架构模式独立于任何一门语言MModel模型VView视图CController控制器MVC的核心思想把数据的管理、业务逻辑控制和数据的展示分离开来使程序的逻辑性和可维护性更强 控制器的基本结构 每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始与结束之间的DOM元素建立数据绑定下例的范围的就是body/body之间的区域 1、实例价格计算器
!DOCTYPE html
html langen ng-appapp
headmeta charsetUTF-8titlech3_1/titlescript typetext/javascript srcangularjs.js/script
/head
!--当AngularJS框架遇到ng-controller指令时会查找名为“CalcController”的构造方法实体化构造器对象--
body ng-controllerCalcController!--使用ng-model指令绑定作用域对象$scope和input表单--div单价input typenumber ng-modelprice//divbr/div数量input typenumber ng-modelnum//divbr/!--通过AngularJS表达式调用totalPrice()方法--div总价{{totalPrice()}}/divscript typetext/javascript!--控制器对象实例化时AngularJS会创建一个名为$scope的作用域对象然后把$scope对象注入控制器对象中--// $log参数用于向控制台输入日志信息function CalcController($scope,$log){// 在控制器中通过$scope对象访问表单数据// 指定$scope对象的price属性的初值为0$scope.price0;$scope.num0;// 增加一个totalPrice()方法用于计算总价$scope.totalPricefunction (){return $scope.price * $scope.num;}}// 定义一个名为app的模块// angular.module()方法返回一个模块实例对象//我们可以调用对象的controller()directive()filter()等方法向模块中添加控制器、指令、过滤器等组件 var appangular.module(app,[]);// 使用模块实例的controller()方法来声明一个控制器第一个参数控制器名称第二个匿名方法即控制器的构造方法app.controller(CalcController,CalcController);/script
/body
/html 2、一个完整的登录认证案例
!DOCTYPE html
html langen ng-appapp
headmeta charsetUTF-8titlech3_2/title!--引入bootstrap框架美化登录界面--link relstylesheet typetext/css hrefbootstrap/css/bootstrap.css/script typetext/javascript srcangularjs/angular.min.js/script
/head
body
div classcontainer ng-controllerLoginControllerdiv classlogin-title text-centerh1small登录/small/h1/divdiv classformdiv classform-groupdiv classcol-xs-12div classinput-groupspan classinput-group-addonspan classglyphicon glyphicon-user/span/spaninput typetext ng-modeluname classform-control placeholder用户名/div/div/divbr/br/div classform-groupdiv classcol-xs-12div classinput-groupspan classinput-group-addonspan classglyphicon glyphicon-lock/span/spaninput typetext ng-modelpword classform-control placeholder密码/div/div/divbr/br/div classform-group form-actionsdiv classcol-xs-4 col-xs-offset-4button ng-clicklogin() typesubmit classbtn btn-sm btn-infospan classglyphicon glyphicon-log-in/span登录/buttonbutton typereset classbtn btn-sm btn-infospan classglyphicon glyphicon-off/span重置/button/div/div/div
/div
scriptfunction LoginController($scope){$scope.loginfunction(){if($scope.unameadmin $scope.pwordadmin){alert(登录成功)}else{alert(用户名或密码错误请重试)}}}var appangular.module(app,[]);app.controller(LoginController,LoginController);
/script
/body
/html 三、应用模块化 应用模块划分能够使程序结构良好、提高代码可维护性同时还能避免命名冲突 1、模块的定义
//定义一个无依赖的模块
angular.module(appModule,[])
//定义一个依赖module1, module2的模块
angular.module(appModule,[module1,module2]);
引入模块
html ng-appappModule 2、实例
login.html
!DOCTYPE html
!--ng-app指定页面使用loginModule模块中的内容--
html langen ng-apploginModule
headmeta charsetUTF-8title登录页面/titlescript src../angularjs/angular.min.js/scriptscript srccommon.js/script
/head
bodydiv ng-controllerUserControllerdiv用户名input typetext ng-modeluname placeholder用户名/divbr/div密码input typepassword ng-modelpword placeholder密码/divbr/divbutton ng-clicksubmit()登录/button/div/div
/body
/html
register.html
!DOCTYPE html
!--ng-app指定页面使用registerModule模块中的内容--
html langen ng-appregisterModule
headmeta charsetUTF-8title注册页面/titlescript src../angularjs/angular.min.js/scriptscript srccommon.js/script
/head
body
div ng-controllerUserControllerdiv用户名input typetext ng-modeluname placeholder用户名/divbr/div密码input typepassword ng-modelpword placeholder密码/divbr/divbutton ng-clicksubmit()注册/button/div/div
/body
/html
common.js使用模块化管理解决了命名冲突突出模块化管理的可维护性
// 使用AngularJS模块对两个控制器进行划分
// 因为在不同的模块下所以控制器同名也不冲突
// 使用loginModule模块下的UserController控制器
var loginModuleangular.module(loginModule,[]);
loginModule.controller(UserController,function ($scope,$log){$scope.unamelogin;$scope.pwordadmin;$scope.submitfunction (){alert(登录模块UserController);}
});
// 使用registerModule模块下的UserController控制器
var registerModuleangular.module(registerModule,[]);
registerModule.controller(UserController,function ($scope,$log){$scope.unameregister;$scope.pwordadmin;$scope.submitfunction (){alert(注册模块UserController);}
});四、作用域与事件 AngularJS作用域本质上就是一个普通的JavaScript对象key-value键值对当AngularJS遇到ng-app时会自动创建一个根作用域对象$rootScope 当AngularJS遇到ng-controller时会自动创建一个子作用域对象$scope子作用域对象继承父作用域对象的所有属性主要功能存放模型数据 1、AngularJS作用域对象原型继承
// 定义父作用域
var parent$rootScope;
// $new()方法用于创建子作用域
var childparent.$new();
2、AngularJS作用域监视 对作用域中的属性进行监视并对其变化做出相应的处理监视的方法 参数一需要监视的属性参数二在监视属性发生变化时需要回调的方法参数三默认为false1、$watch(参数一参数二false) 引用监视只有监视对象的引用发生变化时才会有反应2、$watch(参数一参数二true) 全等监视只要监视对象的内容发生变化就反应3、$watchCollection(参数一参数二) 监视数组或集合监视的数组或集合里某项的内容改变时不反应减少项或增多项时才反应性能132调用$watch()监视方法后会返回一个方法A满足某条件后调用这个方法A即可解除监视 实例
1添加监视
!DOCTYPE html
html langen ng-appwatchModule
headmeta charsetUTF-8titlech5_1/titlescript typetext/javascript src../angularjs/angular.min.js/script
/head
body!-- 用于输入名称的文本框绑定到name模型 --input typetext ng-modelname!-- 用于显示count变量的改变次数 --divchange count:{{count}}/div!--定义了一个控制器--scriptangular.module(watchModule,[]).run([$rootScope,function ($rootScope){// 初始化count和name属性$rootScope.count0;$rootScope.name江荣波;// 使用$watch()方法对name属性进行监视// 每当name属性改变count就加一$rootScope.$watch(name,function (){$rootScope.count;})}]);/script
/body
/html2解除监视
!DOCTYPE html
html langen ng-appwatchModule
headmeta charsetUTF-8titlech5_1/titlescript typetext/javascript src../angularjs/angular.min.js/script
/head
bodyinput typetext ng-modelname !-- 输入框绑定到 name 模型 --divchange count:{{count}}/div !-- 显示 count 变量的值 --scriptangular.module(watchModule,[]).run([$rootScope,function ($rootScope){$rootScope.count0; // 初始化 count 变量$rootScope.name江荣波; // 初始化 name 变量var unbindWatcher$rootScope.$watch(name,function (newValue,oldValue){ // 监视 name 变化//比较字符串用比较数值用if(newValue江){ // 如果新值为 江//调用$watch()返回的方法unbindWatcher()解除监视unbindWatcher(); // 解除监视}$rootScope.count; // count 变量加一})}]);/script
/body
/html3、AngularJS的一些高级特性
$digest循环$apply()方法 $digest循环AngularJS在监视时会周期性地运行一个函数来检查scope模型中的数据是否发生了变化当AngularJS作用域中的模型数据发生变化时AngularJS会自动触发$digest循环自动更新视图 只有使用AngularJS内置的指令或服务时它才知道我们修改了哪里当我们使用非AngularJS的内置指令或服务时AngularJS不知道我们修改了哪里就需要手动调用$apply()方法来触发$digest循环 比如下例中的JavaScript的原生方法setTimeout()setInterval()就不属于AngularJS的内置指令或服务但setTimeout()setInterval()分别可用AngularJS的内置服务$timeout, $interval替代在实际项目时遇到作用域属性修改但视图没有更新可以考虑一下是否是$digest循环没有触发 1setTimeout()
!DOCTYPE html
html langen ng-appmsgModule
headmeta charsetUTF-8titlech5_2/titlescript typetext/javascript src../angularjs/angular.min.js/script
/head
bodydiv ng-controllerMsgController!--单击按钮3秒后作用域中message属性内容回显到页面中--divbutton ng-clickscheduleTask()3秒后回显信息/button/divdiv{{message}}/div/div
scriptangular.module(msgModule,[]).controller(MsgController,function ($scope){$scope.scheduleTaskfunction (){// 此处引用了setTimeout()方法来更新模型数据它不属于AngularJS内置的指令或服务// 所以AngularJS不知道我们改了什么就需要使用$apply()来触发$digest循环setTimeout(function (){// 把修改作用域属性的代码移到一个匿名方法中// 然后把该匿名方法作为$apply()方法的参数即可触发$digest循环$scope.$apply(function(){$scope.message信息内容;console.log(message$scope.message);})},3000);}});
/script
/body
/html
2$timeout()
// ...angular.module(msgModule,[]).controller(MsgController,// $timeout属于AngularJS的内置服务可以自动触发$digest循环function ($scope,$timeout){$scope.scheduleTaskfunction (){$timeout(function (){$scope.message信息内容;console.log(message$scope.message);},3000);}});
//... 4、作用域事件路由与广播 作用域事件机制用于传递数据两种事件传播机制 1、事件从子作用域路由到父作用域2、事件从父作用域广播到所有子作用域相关方法 1、$emit() 事件从子作用域路由到父作用域参数一事件名称参数N传递内容2、$on() 在父作用域中注册一个事件监听器监听子作用域路由的事件参数一要监听事件的名称参数二事件处理方法event事件对象还有一些实用的属性和方法可以通过它获取更多关于事件的信息 $scope.$on(infoEvent,function (event,data){}); 3、$broadcast() 向子作用域广播事件有的子作用域只要注册了事件监听器就能收到父作用域的广播事件 1子——父
!DOCTYPE html
html langen ng-appeventModule
headmeta charsetUTF-8titlech5_3/titlescript typetext/javascript src../angularjs/angular.min.js/script!--设置两个框的样式--style#parent{width:350px;height:250px;border:3px solid #ccc;}#child{width:300px;height:200px;border:3px solid #ccc;margin:10px auto;}/style
/head
bodydiv idparent ng-controllerParentController父作用域div idchild ng-controllerChildController子作用域!--单击Emit按钮时会触发postEvent()方法--button ng-clickpostEvent()Emit/button/div/divscriptvar appangular.module(eventModule,[])// 控制器对象实例化时会创建两个具有父子关系的作用域对象app.controller(ParentController,function ($scope){// 父作用域注册一个监听器// 监听事件的名称infoEvent// $on()方法的参数二又包含了两个参数分别是事件对象传递的数据$scope.$on(infoEvent,function (event,data){console.log(接收到子作用域事件...);console.log(data);});});app.controller(ChildController,function ($scope){// postEvent()方法会调用$emit()方法向父作用域路由事件// 事件名称infoEvent// 事件内容一个JavaScript对象属性name的值为Janeage:23$scope.postEventfunction (){$scope.$emit(infoEvent,{name:Jane,age:23});}});/script
/body
/html 打开浏览器的控制台查看输出信息 2子——父
!DOCTYPE html
html langen ng-appeventModule
headmeta charsetUTF-8titlech5_4/titlescript typetext/javascript src../angularjs/angular.min.js/script!--设置两个框的样式--style#parent{width:450px;height:250px;border:3px solid #ccc;}.child{width:150px;height:200px;border:3px solid #ccc;float:left;margin-left:20px;}/style
/head
body
div idparent ng-controllerParentControllerdiv父作用域button ng-clickpostEvent()Broadcast/button/divdiv classchild ng-controllerChild1Controller子作用域1/divdiv classchild ng-controllerChild2Controller子作用域2/div
/div
scriptvar appangular.module(eventModule,[])// 控制器对象实例化时会创建三个具有父子关系的作用域对象一父二子app.controller(ParentController,function ($scope){// 对按钮触发的单击事件进行处理$scope.postEventfunction (){// 向子作用域广播事件$scope.$broadcast(infoEvent,{name:Jane,age:23});}});app.controller(Child1Controller,function ($scope){// 监听事件$scope.$on(infoEvent,function (event,data){console.log(子作用域1接收到父作用域广播事件……);console.log(data);});});app.controller(Child2Controller,function ($scope){// 监听事件$scope.$on(infoEvent,function (event,data){console.log(子作用域2接收到父作用域广播事件……);console.log(data);});});
/script
/body
/html 五、路由与视图 1、创建多视图应用 建立URL到AngularJS视图的映射 $routeProvider对象用于创建路由映射 把控制器、视图模板、URL三者关联起来1、when(path,route)方法 匹配路由中已定义的URLpathURLroute控制器、视图2、otherwise(params)方法 匹配路由中未定义的URL 实例 add-order.html !--视图一--
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydivh3新增订单页面/h3/div
/body
/html
show-orders.html
!--视图二--
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydivh3显示订单列表页面/h3/div
/body
/html
app.js
// angular.module()方法返回一个模块实例
// 需要使用到AngularJS的路由模块该模块定义在angular-route.js文件中需要添加ngRoute模块依赖
var routeModuleangular.module(routeModule,[ngRoute]);
// 调用模块实例的config()方法对路由进行配置
routeModule.config([$routeProvider,// 向$routeProvider是AngularJS的一个内置对象用于创建路由映射// when(path,route)和otherwise(params)方法用于把控制器、视图模板、URL三者关联起来function ($routeProvider){$routeProvider.// 定义路由一URL为/addOrder映射到页面templates/add-order.htmlwhen(/addOrder,{templateUrl:templates/add-order.html,controller:AddOrderController}).// 定义路由二URL为/showOrders映射到页面templates/show-orders.htmlwhen(/showOrders,{templateUrl:templates/show-orders.html,controller:ShowOrdersController}).//未定义的URLotherwise({redirectTo:/addOrder});}]);
index.html
!--实现多视图的切换--
!DOCTYPE html
html langen ng-approuteModule
headmeta charsetUTF-8titlech6_1/titlelink relstylesheet href../../bootstrap/css/bootstrap.min.css/link relstylesheet href../../bootstrap/css/bootstrap-theme.min.css/script src../../angularjs/angular.js/scriptscript src../../angularjs/angular-route.js/scriptscript srcjs/app.js/scriptstyle typetext/css.mainDiv{margin:25px 50px 75px 100px;}/style
/head
bodydiv classmainDiv!--导航栏--ul classnav nav-tabslia href#!/showOrdersspan classglyphicon glyphicon-th-list/span订单列表/a/lilia href#!/addOrderspan classglyphicon glyphicon-plus/span新增订单/a/li/ul!--ng-view是AngularJS的一个内置指令用于定义一个视口加载视图内容--div classng-view/div/div
/body
/html 2、通过URL向控制器传递参数 $routeParams服务 实例 app.js
var routeModuleangular.module(routeModule,[ngRoute]);
routeModule.config([$routeProvider,function ($routeProvider){$routeProvider.// 在URL中添加一个参数orderId用冒号隔开when(/showOrder/:orderId,{templateUrl:templates/order-details.html,controller:ShowOrderController})}]);
// 在控制器注入$routeParams服务
routeModule.controller(ShowOrderController,function ($scope,$routeParams){// 通过$routeParams.orderId属性访问URL传递的参数并保存在$scope对象的order_id属性中$scope.order_id$routeParams.orderId;
});order-details.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlech6_2/title
/head
body!--把URL传递的orderId参数回显到页面中--h2订单号 #{{order_id}}/h2此处为订单明细…… b#{{order_id}}/b
/body
/html index.html
!--实现多视图的切换--
!DOCTYPE html
html langen ng-approuteModule
headmeta charsetUTF-8titlech6_1/titlelink relstylesheet href../../bootstrap/css/bootstrap.min.css/link relstylesheet href../../bootstrap/css/bootstrap-theme.min.css/script src../../angularjs/angular.js/scriptscript src../../angularjs/angular-route.js/scriptscript srcjs/app.js/scriptstyle typetext/css.mainDiv{margin:25px 50px 75px 100px;}/style
/head
body
div classmainDiv!--导航栏--ul classnav nav-tabslia href#span classglyphicon glyphicon-th-list/span订单列表/a/li/uldivtable classtabletheadtrth订单号/thth商品名称/thth操作/th/tr/theadtbodytr classsuccesstd1102/tdtd笔记本电脑/td!--在URL中传递不同的订单号单击链接后加载订单明细视图--tda href#!/showOrder/1102查看明细/a/td/trtr classinfotd4531/tdtd移动硬盘/tdtda href#!/showOrder/4531查看明细/a/td/trtr classactivetd1036/tdtdiPone/tdtda href#!/showOrder/1036查看明细/a/td/tr/tbody/table/divdiv classng-view/div
/div
/body
/html
