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 });