angular入門(基礎篇)
阿新 • • 發佈:2017-06-29
頁面 anti uno itl func obd 作用域 input name
, 但在使用它時需要以 - 分割, runoob-directive,返回的參數 ——template:html代碼。
一、什麽是AngularJs?
AngularJs是一個JavaScript框架,通過指令擴展了HTML,並且通過表達式綁定數據到HTML.
AngularJs使得開發現代的單頁面應用程序(SPA:Single Page Applications)變得更加簡單,並且其避免了js中的DOM操作,使得加載速度大大加快。
二、Angular入手模板框架搭建
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular.min.js"></script> </head> <body ng-app = "app" ng-controller=‘myVC‘> </body> <script> var app = angular.module(‘app‘,[]).controller(‘myVC‘,function($scope){}; </script> </html>
AngularJS 模塊(Module) 定義了 AngularJS 應用。
AngularJS 控制器(Controller) 用於控制 AngularJS 應用。
ng-app指令定義了應用,也就是angular指令有效的作用域, ng-controller 定義了控制器,一個作用域內可以定義多個控制器。
三、Angular常用指令及用法
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據:
<div ng-app="" ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]"> </div>
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序,{{ name }} 是通過 ng-model="name" 進行同步。
<input type="number" ng-model="quantity"> <p>{{quantity}}</p>
ng-repeat 指令會重復一個 HTML 元素:
<li ng-repeat="x in names"> {{ x }} </li>
.directive 函數來添加自定義的指令:
註:使用駝峰法來命名一個指令, runoobDirective
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定義指令!</h1>" }; }); </script>
angular入門(基礎篇)