angular1.0学习记录

xinghunzhiye2010

已于 2022-06-14 16:36:13 修改

阅读量299

点赞数

分类专栏： node 文章标签： angularjs

于 2020-05-18 16:14:54 首次发布

本文链接：https://blog.csdn.net/xinghunzhiye2010/article/details/106195357

版权

node 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、JS结构化框架

2、特性和特点：

1）双向数据绑定

2）声明式依赖注入

3）解耦应用逻辑，数据模型和视图

4）完善的页面指令

5）定制表单验证

6）Ajax封装

3、单页面应用（Single Page Application，SPA）

特点：1、将所有的活动局限于一个页面。

2、当页面中有部分数据发生了变化不会去刷新整个页面，而是局部刷新

3、利用ajax技术，路由。

4、

1）ng-app=" " 定义angularJS的使用范围；（

1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。自动创建$rootScope根作用域对象

2.ng-app作用：告诉子元素指令是属于angularJs。

3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。

// 页面加载完成后,再加载模块
angular.element(document).ready(function() {
//手动加载myApp2 ng-app
angular.bootstrap(document.getElementById("myApp2"), ['myApp2'])
}) ）

2）ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；

3）ng-model="变量" 定义变量名；将当前

4）ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。
AngularJS 模块定义应用:
AngularJS 模块
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
AngularJS 控制器
app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {

restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

可以通过以下方式来调用指令：元素名、属性、类名、注释

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

5、AngularJS 表达式与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

6、Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。