首页 > 代码库 > 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入门(基础篇)