1. The front-end frame AngularJS entry
1.1 AngularJS Introduction
AngularJS was born in 2009 , by the Misko Hevery created and others, as after Google acquired. It is an excellent front-end JS framework that has been used in Google 's variety of products are. AngularJS has many features, the most central is: MVC , modular, automated two-way data binding, dependency injection, and so on.
1.2 AngularJS four features
1.2.1 MVC pattern
Angular follow software engineering MVC pattern , and encourages the show, loose coupling between data and logic components . Dependency injection ( dependency Injection ), Angular for the client Web application to bring the traditional server-side services, such as the view of the independent control. Therefore, reducing the number of back-end load, resulting in a lighter Web applications.
Model: data , is actually angular variable ($ scope.XX);
View: presentation of data , Html + Directive ( Directive );
Controller: operational data , that is, function, deletions change search data ;
1.2.2 two-way binding
AngularJS is based on the belief: that declarative programming should be used to build the user interface and write software to build, and imperative programming is well suited to represent the business logic. Frame traditional and extends the HTML , to adapt to dynamic content via a bidirectional data binding, two-way data binding allows automatic synchronization between the model and the view. Thus, the AngularJS such that DOM operations is not important and improved testability.
1.2.3 Dependency Injection
Dependency injection (Dependency Injection, referred to as DI) is a design pattern , refer to other objects in an object without having to manually create dependency, just "a voice shouted," this object when creating its dependent objects automatically by the framework create and inject come in , in fact, the least knowledge of the law ; module all the service and provider types of objects can be achieved according to the parameter name DI.
1.2.4 Modular design
Highly cohesive rules coupling
1) official modules ng , ngRoute , ngAnimate
2) Module user-defined angular.module ( ' module name ', [])
1.3 Getting Small Demo
1.3.1 Expression
| <html> <head> <title> Getting small Demo-1 </ title> <script src="angular.min.js"></script> </head> <Body-app> {{100+100}} </body> </html> |
Execution results are as follows:
Expression is written {{ expression }} expression can be a variable or expression
ng-app directive role is to tell the child what element of instruction is owned by angularJs of , angularJs be identified
ng-app directive defines AngularJS application root element.
ng-app instruction automatically guide (automatically initialized) when the application page is loaded.
1.3.2 two-way binding
| <html> <head> <title> Getting small Demo- 2-way binding </ title> <script src="angular.min.js"></script> </head> <Body-app> Please enter your name: <Model-ng the INPUT = "myname"> <br> {{myname}}, hello </body> </html> |
Operating results are as follows:
Note : After entering the Chinese Enter to display
ng-model command variable for binding , the content of the text box so that the user input will be bound to the variable, the variable may be output in real time expression.
1.3.3 initialization command
If we want to have some variable has an initial value, you can use ng-init command to initialize variables
| <html> <head> <title> Getting small Demo-3 Initialization </ title> <script src="angular.min.js"></script> </head> <body ng-app ng-init = "myname = ' excellent job '" > Please enter your name: <Model-ng the INPUT = "myname"> <br> {{myname}}, hello </body> </html> |
operation result:
1.3.4 Controller
| <html> <head> <title> Getting small Demo-4 Initialization </ title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.add=function(){ return parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > 运算结果：{{add()}} </body> </html> |
运行结果如下：
ng-controller用于指定所使用的控制器。
理解 $scope：
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.
1.3.5 事件指令
| <html> <head> <title>入门小Demo-5 事件指令</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.add=function(){ $scope.z= parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > <button ng-click="add()">运算</button> 结果：{{z}} </body> </html> |
运行结果：
ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法
1.3.6 循环数组
| <html> <head> <title>入门小Demo-6 循环数据</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.list= [100,192,203,434 ];//定义数组,注意元素不能重复 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html> |
这里的ng-repeat指令用于循环数组变量。
运行结果如下：
1.3.7 循环对象数组
| <html> <head> <title>入门小Demo-7 循环对象数组</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.list= [ {name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56} ];//定义数组 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body> </html> |
运行结果如下：
1.3.8 内置服务
我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。注意：以下代码需要在tomcat中运行。
| <html> <head> <title>入门小Demo-8 内置服务</title> <meta charset="utf-8" /> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope,$http){ $scope.findAll=function(){ $http.get('data.json').success( function(response){ $scope.list=response; } ); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body> </html> |
建立文件 data.json
| [ {"name":"张三","shuxue":100,"yuwen":93}, {"name":"李四","shuxue":88,"yuwen":87}, {"name":"王五","shuxue":77,"yuwen":56}, {"name":"赵六","shuxue":67,"yuwen":86} ] |
注意：不能直接浏览器打开运行，需要把html和js、json文件发布到一个web服务器才能正常运行。
运行结果：
