首页 > 代码库 > angular入门(基础篇)
angular入门(基础篇)
一、什么是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="http://www.mamicode.com/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, 但在使用它时需要以 - 分割, runoob-directive,返回的参数 ——template:html代码。
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script>
angular入门(基础篇)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。