學習要點：
第一步：創建一個模塊
// function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])在視圖中應用模塊
<!-- use module --><html ng-app="exampleApp"> ...</html>
第二步：定義值
var valueModule = angular.module("exampleApp.Values", [])// defind valuevar now = new Date();valueModule.value("nowValue", now);第三步：定義服務
var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.service("days", function (nowValue) { this.today = nowValue.getDay(); this.tomorrow = this.today + 1; })第四步：定義控制器
var controllerModule = angular.module("exampleApp.Controllers", []);// function : define a controller named dayCtrl// the controller include two param:// param detail:// param one : name of controller// param two : a factory function // the param $scope of factory function show information to viewcontrollerModule.controller("dayCtrl", function ($scope, days) { // days : use custom service // today is ... $scope.day = days.today; // tomorrow is ... $scope.tomorrow = 7;})將控制器應用于視圖
<!-- use controller --> <div class="panel" ng-controller="dayCtrl"> <div class="panel-header"> <h3>Angular App</h3> </div> <!-- if the day is undefined, show unknow --> <!-- use filter and data binding --> <h4>Today is {{ day || "unknow" }}</h4> <h4>Tomorrow is {{ tomorrow || "unknow" }}</h4> </div>第五步：定義指令
var directiveModule = angular.module("exampleApp.Directives", []);// function : define a directive named highlight// it accepts two param// param one : the name of directive // param two : a factory methoddirectiveModule.directive("highlight", function ($filter) { // get the filter function var dayFilter = $filter("dayName"); // param detail: // scope : view scope of action // element : the element which uses the custom directive // attrs : the attrs of the element return function (scope, element, attrs) { // console.log(dayFilter(scope.day)); if (dayFilter(scope.day) == attrs['highlight']) { element.css("color", 'red'); } } })將指令應用于視圖
...<h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>...
新聞熱點
疑難解答
圖片精選
