angularjs入门----笔记

AngularJs也是一个MVVM的前端js框架。

指令：ng-app/ng-init

ng-app：1.启动angularjs框架；2.告诉angularjs框架从ng-app指令所在标签的开始到结束之间的所有DOM元素都由angularjs框架管理。

注意：1.ng-app一般放在html标签内，用于告诉angularjs框架，整个页面都由angularjs管理；

<html ng-app>
<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div>{{"hello world!"}}</div>
    <div>{{"hello angularjs!"}}</div>
</body>
</html>

运行结果为：

hello world!

hello angularjs!

2.一个页面默认加载第一个ng-app

<html >
<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div ng-app>{{"hello world!"}}</div>
    <div ng-app>{{"hello angularjs!"}}</div>
</body>
</html>

运行结果为

hello world!

ng-init：初始化作用域

<html ng-app>
<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-init="person={'name':'jane'};arr=['angularjs','jquery','dojo']">
    <div>{{person.name}}</div>
    <div>{{arr[0]}}</div>
</body>
</html>

运行结果：

jane

angularjs

ng-model:从作用域到视图，从视图到作用域的双向绑定

<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div>用户名：<input type="text" name="uname" ng-model="uname" /></div>
    <div><span id="info">{{uname}}</span></div>
</body>
</html>

ng-bind:从作用域到视图的单向绑定

<html ng-app>
<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div>用户名：<input type="text" name="uname" ng-model="uname" /></div>
    <div><span id="info" ng-bind="uname"></span></div>
</body>
</html>

在绑定值，不需要进行运算处理以及使用过滤器对输出内容进行处理时，ng-bind可以代替{{}}

表达式：{{}} 双大括号中间的部分，比如上述的person.name 和arr[0]