关键点:
前端JS框架:封装了使用JS开发前端重复功能,扩展了HTML,主要用于页面操作和显示。
核心:MVC、模块化、双向数据绑定、依赖注入、语义化标签、表达式等。
双向数据绑定
引入相关js文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--匿名应用模块--> <div ng-app=""> <input ng-model="username" name="username"/> <input ng-model="username"/> <div>{{username}}</div> <div ng-bind="username"></div> </div> </body> </html>
|
ng-app=””匿名应用模块,一般要写名字,便于后面初始化
ng-model:自动绑定表单元素的value的值到Angularjs内部变量中。
ng-bind:作用等同于表达式,但用法不同。一般用于绑定非表单元素,用来显示变量的。
ng-bind和{{}}区别:前者会将标签的子标签的所有内容替换为变量的内容,后者只是在当前位置显示变量的内容。
基于模块化的MVC(MVVM)
视图:主要指HTML静态页面数据标签,主要是用来显示。
模型:主要只填充视图的、逻辑处理的一些数据。比如json、变量
控制:一些js代码,编写逻辑。主要是获取模型、填充视图、从视图获取数据、填充模型。
m和vm的转换:
比如变量:
var username=”XiaoQi”;
$scope.username=username;
vm的变量其实就是绑定到全局变量$scope中属性。
页面上:{{username}}
注意:Angularjs变量在页面上不能加$scope。
如果是定时器等内部js改变了变量,那么默认情况下Angularjs不能实现双向数据的绑定显示,需要使用$.digest强制通知(刷新)
页面打开时初始化内容示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--<div ng-app="myApp" ng-controller="myCtrl" ng-init="username='Jack'">-->
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="username"/> <div>{{username}}</div> </div>
<!--控制器--> <script type="text/javascript"> //初始化应用模块 //参数1:应用模块的名字 //参数2:使用扩展模块,这里没有 var myApp=angular.module("myApp",[]); //初始化控制器:认为控制器绑定了一堆js //参数1:控制器的名字 //参数2:js函数 myApp.controller("myCtrl",["$scope",function ($scope) { //初始化变量 $scope.username="XiaoQi"; //可以写任何的js }]);
</script> </body> </html> |
注意:
如果定义了有名字的应用模块和控制器,那么必须使用js初始化它!
依赖注入DI
![](https://i-blog.csdnimg.cn/blog_migrate/e711cac0cdc3208e071bf82be8c549a9.png)
按钮事件绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--视图--> <div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="username"/> <input type="button" value="清空数据1" ng-click="clearMsg()"/> <input type="button" value="清空数据2" ng-click="username=''"/> <div>Hello {{username}}</div> </div> <!--控制器--> <script type="text/javascript"> //初始化应用模块 var myApp=angular.module("myApp",[]); //初始化控制器 myApp.controller("myCtrl",["$scope",function($scope){ //初始化一个angularjs的事件 $scope.clearMsg=function(){ //清空数据 $scope.username=""; }; }]); </script> </body> </html> |
重复遍历
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--视图--> <div ng-app="myApp" ng-controller="myCtrl"> <table border="1"> <tr> <th>序号</th> <th>商品编号</th> <th>商品名称</th> <th>商品价格</th> </tr> <tr ng-repeat="product in products"> <td>{{$index+1}}</td> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> </table> </div> <!--控制器--> <script type="text/javascript"> angular.module("myApp",[]) .controller("myCtrl",["$scope",function($scope){ //json数组 $scope.products=[ {"id":1001,"name":"电视机","price":998}, {"id":1002,"name":"洗衣机","price":988898} ]; }]) </script> </body> </html>
|
product:随便写,每次遍历时的临时angularjs的对象,这里指每一个json对象。
路由机制
之前:include包含页面,只是复用页面,但复用后的页面也是整体刷新的。
通过angularjs的路由,可以实现,部分刷新,实现重复的头和尾可以不刷新。而且多视图单页面效果。
底层实现:通过html中#(锚点)来实现的。
官方例子:
![](https://i-blog.csdnimg.cn/blog_migrate/ae1cad941b3efbc4304ac1336efce55f.png)
写法:url+#+子路径(要在中间显示的)
引入路由模块:
<!--引入路由模块--> <script type="text/javascript" src="../js/angular-route.min.js" ></script> |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> <!--引入路由模块--> <script type="text/javascript" src="../js/angular-route.min.js" ></script> </head> <body> <div ng-app="myApp"> <div>===========我是头<br /> <a href="#/">首页</a> <a href="#/computer">电脑分类</a> <a href="#/money">财务管理</a> </div> <!--路由中的包含的页面的显示,只能有一个元素--> <div ng-view></div>
<div>==========我是脚</div>
</div>
<!--控制器--> <script type="text/javascript"> angular.module("myApp",['ngRoute']) //angularjs的配置,在配置中配置路由内容 .config(['$routeProvider', function($routeProvider){ $routeProvider //template中支持html标签 .when('/',{template:'这是<h1>首页页面</h1>'}) //.when('/computer',{template:'这是电脑分类页面'}) .when('/computer',{templateUrl:'computer.html'}) .when('/money',{template:'这是财务页面'}) //如果都匹配不上,则跳转到一个页面 .otherwise({redirectTo:'/'}); }]); </script> </body> </html>
|
ng-view:用来显示路由的结果的内容
when:判断语句
template:html的结果,支持html标签
templateUrl:支持加载另外的页面