AngularJs的初步使用

时间 2020-08-06

原文原文链接

AngularJS[1]  诞生于2009年，由Misko Hevery 等人建立，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJs程序分为3部分：模板，表现层逻辑，数据（model）。javascript

模板：咱们用html，css写的ui视图代码，其中包含AngularJs的指令，表达式，并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令（directive）能够由咱们自由扩展。

表现层逻辑：包括应用程序逻辑和行为。用javascript定义做为视图控制器逻辑。在AngularJs做为MVC框架，在控制器中咱们无需添加对于dom级的事件监听，这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为（Action）逻辑。

 数据：视图对象（viewobject）须要被AngularJs Scope（1.0中做为service出现）引用，可使任何类型的javascript对象，数组，基本类型，对象。而且AngularJs会自动异步更新模型，即在ui发生改变的时他会自动刷新模型（mode），反之在模型发生改变的时候也会自动刷新ui。在这里咱们不须要定义形如getter，setter的一些列方法。

AngularJS 控制器（Controller）
用于控制 AngularJS 应用css

1 // controller的使用
2 var myApp = angular.module('myApp',[]);
3        //这里第一个参数controller的名字，后面的参数是所要依赖的模块
4 myApp.controller('GreetingController', ['$scope', function($scope) {
5   $scope.greeting = 'Hola!';
6 }]);

下面是html页面html

 1 <!--ng-app指令定义了应用, ng-controller 定义了控制器。
 2 ng-model 指令把输入域的值绑定到应用程序变量 greeting 
 3 -->
 4 <html ng-app="myApp">
 5     <head>
 6         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
 7     </head>
 8     <body ng-controller="GreetingController">
 9         <div ng-model="greeting">
10         Hello {{greeting}}!
11         </div>
12     </body>
13 </html>

这是运行结果
前端

AngularJs指令
经过内置的指令来为应用添加功能。。java

下面的是一些AngularJS的内置指令

我这里主要讲怎么去自定义指令angularjs

1 var app = angular.module("myApp", []);
2 app.directive("runoobDirective", function() {
3     return {
4         restrict : "A",
5         template : "<h1>自定义指令!</h1>"
6     };
7 });

restrict 值能够是如下几种:json

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

restrict 默认值为 EA, 便可以经过元素名和属性名来调用指令。
下面是html代码数组

 1 <html>
 2     <head>
 3     <meta charset="utf-8">
 4      <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
 5     </head>
 6 <body ng-app="myApp">
 7 <my-directive></my-directive>
 8 <div my-directive></div>
 9 <script>
10     var app = angular.module("myApp", []);
11     app.directive("myDirective", function() {
12         return {
13             restrict : "EA",
14             template : "<h1>hello world!</h1>"
15         };
16     });
17 </script>
18 </html>

结果你们能够去试下，自定义编写指令，主要用于重复的html代码，好比表单啥编写一个指令，而后使用起来方便。markdown

AngularJs 路由
AngularJS 路由容许咱们经过不一样的 URL 访问不一样的内容。
使用路由时，须要导入angular-route.jsapp

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title></title>
 5     </head>
 6     <body ng-app='routingDemoApp'>
 7 
 8         <h2>AngularJS 路由应用</h2>
 9         <ul>
10             <li><a href="#/">首页</a></li>
11             <li><a href="#/computers">电脑</a></li>
12             <li><a href="#/printers">打印机</a></li>
13             <li><a href="#/blabla">其余</a></li>
14         </ul>
15 
16         <div ng-view></div>
17         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
18         <script src="angular-route.js"></script>
19         <script>
20             angular.module('routingDemoApp',['ngRoute'])
21             .config(['$routeProvider', function($routeProvider){
22                 $routeProvider
23                 .when('/',{template:'这是首页页面'})
24                 .when('/computers',{template:'这是电脑分类页面'})
25                 .when('/printers',{template:'这是打印机页面'})
26                 .otherwise({redirectTo:'/'});
27             }]);
28         </script>
29 
30 
31     </body>
32 </html>

View Code

AngularJS 服务(Service)

1 $http({
2 url:'data.json',
3 method:'GET'
4 }).success(function(data,header,config,status){
5 //响应成功
6 
7 }).error(function(data,header,config,status){
8 //处理响应失败
9 });

固然我这里只讲了一些最基础的也是最经常使用的简单例子，你们想要了解仍是要去看下视频，由于我是属于后台开发目前设计到一些AngularJs技术，因此说我这篇主要是给本身几天使用AngularJs的一些总结,固然也但愿你们可以一块儿学习交流。