99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

學(xué)習(xí)AngularJS從Hello World開始

發(fā)布時(shí)間：2016-07-27 19:04  回復(fù):0  查看:2546   最后回復(fù)：2016-07-27 19:04  

本篇體驗(yàn)AngularJS的Hello World，雖然簡(jiǎn)單，但體現(xiàn)了AnuglarJS的一些重要概念。對(duì)于剛入門學(xué)習(xí)AngularJS的同學(xué)有幫助。

 

大致思路是這樣的：

 

通常通過(guò)為html元素添加AngularJS獨(dú)有的屬性來(lái)實(shí)現(xiàn)一些功能，比如ng-app, ng-controller

在js中，通常需要注冊(cè)一個(gè)module，然后為module再注冊(cè)controller等。AngularJS不僅僅有angular.js文件，還有其他的js文件，比如用來(lái)做路由配置的angular-route.js文件等。每一個(gè)文件包含module，使用AnularJS的過(guò)程就是讓這些modules協(xié)同工作的過(guò)程

首先在頁(yè)面引入AngularJS的核心js文件：

<script src="angular.min.js"></script>

接著，在定義js文件中為當(dāng)前頁(yè)面注冊(cè)一個(gè)module:

var myApp = angular.module("helloApp",[])

以上，module的名稱為helloApp, []數(shù)組用來(lái)存放與當(dāng)前module有依賴關(guān)系的其它modules，比如['ngRoute','....']。

然后，為module注冊(cè)controller。

DI方式有三種：

 

方式一，簡(jiǎn)單注入方式(Simple injection method)

 

<html ng-app="helloApp">

 

    <head>

        <meta charset="UTF-8">

        <title>Untitled Document</title>

        <script src="js/angular.js"></script>

        <script>

            var myApp = angular.module("helloApp", []);

            var TestController = function($scope) {

                $scope.hello = "Hello World!";

            }

            myApp.controller("TestController", TestController);//            TestController.$inject = ['$scope']

        </script>

    </head>

 

    <body ng-controller="TestController">

        <p>{{hello}}</p>

    </body>

</html>

 

AngularJs會(huì)掃描function的參數(shù)，提取參數(shù)的名稱(name)作為function的依賴。所以這種方式要求保證參數(shù)名稱必須和注入服務(wù)實(shí)例名稱相同，但對(duì)參數(shù)的順序并沒有要求。

不過(guò)，以上的寫法在給js文件優(yōu)化壓縮的時(shí)候，會(huì)改變$scope變量的名稱，比如替代為a，由于AngularJS只認(rèn)識(shí)$scope不認(rèn)識(shí)a，這樣會(huì)導(dǎo)致報(bào)錯(cuò)。所以，這種方法不推薦。

另外，全局service是以注入的方式被當(dāng)前controller所使用。在AngularJS中，很多全局service都是通過(guò)依賴注入的方式被運(yùn)用。

 

方式二，數(shù)組注釋法(array-style notation)

 

myApp.controller("TestController",['$scope','Project',function($scope,Project){

    $scope.hello = "Hello World!";            

}]);

以上，controller()的第一個(gè)參數(shù)是controller的名稱，第二個(gè)參數(shù)是數(shù)組，數(shù)組的最后一個(gè)元素一定是匿名函數(shù)，其它元素是AngularJS的全局service，或者說(shuō)是全局對(duì)象。需要注意的是：數(shù)組中的全局service的位置和名稱必須和匿名函數(shù)的形參一一對(duì)應(yīng)。這種方式解決了方式一壓縮改變變量名稱的問(wèn)題。

 

方式三，顯示調(diào)用function的$inject

 

AngularJs提供了一種向injector server通知你想要注入的依賴的方式

function myCtrl(a, b) {

    //$scope, Project,故意改成a,b模擬壓縮后的情形}

myCtrl.$inject = ['$scope', 'Project'];

myModule.controller('PhoneDetailCtrl', myCtrl);

最后，頁(yè)面中要做3件事情。

1、使用ng-app聲明當(dāng)前module的名稱

<html ng-app="helloApp">

2、使用ng-controller聲明需要使用的controller

<body ng-controller="TestController">

3、使用{{}}顯示$scope中的變量

<p>{{hello.name}}</p>

完整的代碼如下：

 

<!doctype html><html ng-app="helloApp">

    <head>

        <meta charset="UTF-8">

        <title>Untitled Document</title>

        <script src="angular.min.js"></script>

        <script>

            var myApp = angular.module("helloApp", [])

            myApp.controller("TestController", ['$scope', function($scope) {

                $scope.hello = "Hello World!";

            }]);

        </script>

    </head>

    <body ng-controller="TestController">

        <p>{{hello}}</p>

    </body></html>

 

當(dāng)然，實(shí)際項(xiàng)目中$scope變量通常用來(lái)存儲(chǔ)對(duì)象。比如：

 

            var myApp = angular.module("helloApp", [])

            //聲明對(duì)象并對(duì)其賦值

            var messages = {};

            messages.name = 'Hello World!';

            myApp.controller("TestController", ['$scope', function($scope) {

                $scope.hello = messages;

            }]);

 

在頁(yè)面中按如下調(diào)用：

<p>{{hello.name}}</p>

當(dāng)然與上面寫法等同是：

<p ng-bind="hello.name"></p>

 

 

原文來(lái)自：博客園/學(xué)習(xí)AngularJS從Hello&nbsp;World開始Chris

您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?