js框架——angular.js
这是一个前端用的框架，使用简单。详细介绍这里就不写了，主要介绍其语法和作用——
1. 声明一个angular
如果想要使用一个angular代码，则需要在【想要使用angular的范围内写上ng-app】，例如，对象是整个body内容的话，就需要在body标签内添加——
<body ng-app>
就和添加一个属性差不多的语法方式，不要多想
2. angular的使用
<p>这是我们第一次接触ag的表达式 {{1 + 2}}</p>
以上代码是angular的表达式，在｛｛｝｝中的部分代表视图——即显示部分，这里主要会显示各种需要呈现的数据，而且里面也可以写上表达式，如上图。
一般的，都是：
<p>Hello {{name }}!</p>
代表显示这个name变量，如果后台设定了name等于3，或者"ajaja"，那么执行之后就会显示3或者"ajaja"。
3. 过滤器
所谓过滤，就是将一种东西，通过某种规律，规则，转换成另一种东西。例如污水过滤，就是将污水，通过【过滤杂质】这一规则，转换成【干净的水】，重要的是转换和转换规则。
angular的过滤，就是这么一个转换的规则：
<p>Hello {{name| uppercase }}!</p>
这句话的意思，是输出name变量，并且将其转为大写方式。
过滤可以同时使用多种：
<p>Hello {{name| uppercase|lowercas }}!</p>
过滤的规则有多种。
4. ｛｛｝｝使用范围
我们可以在一个标签内使用｛｛｝｝作为视图输出各种东西，如
<p>Hello {{name| uppercase }}!</p>
而同样，我们也可以在【标签上面使用{{}}】，如
<p class="{{name}}">Hello {{name| uppercase }}!</p>
如果name的值是user，那么就会输出——
USER，且带有user类的css样式。
5. 模块定义
app一般一个网页只定义一个，毕竟多了即无用也不好用。
要使用app就必须使用模块。。
定义的方式：
var app = angular.module("MyApp", []);
Myapp是这个文档app的值，上面没有写，其实应该是有一个值的，例如
<body ng-app="thisapp">
如此，这个thisapp就是上面的MyApp了，通过这句话声明一个模块出来，然后构造各种东西进去。
6. 控制器
控制器类似于小型的js文件，它们专门负责某一块代码的js构造。一个文档中可以有多个控制器，每个控制器可以有不同的功能。使用控制器，要在标签上声明，并给予名称——
<div ng-controller="MyCtrl">
<p>{{value}}</p>
</div>
给予名称之后，就可以在后台js文件上写上各种东西了，例如——
function MyCtrl($scope) {
$scope.value = "some value";
}
可以看到，结果为some value。
7. ng-init初始化程序
init用于初始化数据，例如：
<div ng-controller="MyCtrl">
<p ng-init="incrementValue(5)">{{value}}</p>
</div>
function MyCtrl($scope) {
$scope.value = 1;
$scope.incrementValue = function(value) {
$scope.value += value;
};
}
返回的结果是2，说明这个函数自动执行了。这就是初始化。
8. ｛｛｝｝还能塞什么
这个里面其实还能塞函数：
<div ng-controller="MyCtrl">
<p>{{getvalue()}}</p>
</div> function MyCtrl($scope) {
$scope.value = 1;
$scope.newvalue = 2;
$scope.getIncrementedValue = function() {
return $scope.value + 1;
};
$scope.getvalue = function(){
return $scope.newvalue;
}
}
9.监听
使用model可以随时让模型和视图同步更新——
<div ng-controller="MyCtrl">
<input type="text" ng-model="name" placeholder="Enter your name">
<p>{{greeting}}</p>
</div> function MyCtrl($scope) {
$scope.name = "";
//监听该模块作用域中名字的变化
$scope.$watch("name", function(newValue, oldValue) {
if (newValue.length > 0) {
$scope.greeting = "Greetings " + newValue;
}
});
}
上面的name是模块的名称，$scope.$watch是监听函数，它监听的对象是name模块，然后执行后面的函数。
当name中数据发生改动的时候触发。
10. 模块嵌套
模块也是可以嵌套的用的，就和对象的嵌套一样。遵循的规则也差不多，外面的模块不能调用里面的变量，里面的模块可以调用外面的变量——
.nested {
border: 1px solid red;
margin-left: 2em;
padding: 1em;
}
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
//内嵌入的一个控制层,
//内嵌入的一个作用域，一层一层往上找
$scope.name = "gyfnice"
});
11. 循环
指令ng-repeat表示循环，循环的范围是指令所在的标签之间所有内容
<ul ng-repeat="user in users">
<li>{{user}}</li>
</ul>
app.controller("MyCtrl", function($scope) {
$scope.users = ["Peter", "Daniel", "Nina"];
});
如此，就会返回三个li——
<li>Peter</li>
<li>Danel</li>
<li>Nina</li>
js框架——angular.js的更多相关文章
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- js框架——angular.js（5）
1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...
- js框架——angular.js（2）
1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...
- js框架——angular.js(4)
1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...
- js框架——angular.js（3）
1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- vue.js与angular.js的区别（个人）
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- [ An Ac a Day ^_^ ] CodeForces 525B Pasha and String 技巧
题意就是一次次翻转字符串 然后输出最终的字符串 暴力一发O(n*m)果然超时了 因为每次翻转的的都是a-1到对称位置 所以一个位置翻转两次等于没有操作 所以只需要记录一下len/2的位置前的操作次数 ...
- Chapter 16_1 Class
一个类就是一个创建对象的模具.对于一些基于原型的语言,对象是没有“类型”的,而是每个对象都有一个原型(prototype). 原型也是一种常规的对象.当其他对象(类的实例)遇到一个未知操作时,原型会先 ...
- 深度探索C++对象模型之C++对象模型笔记
0.菜鸟觉得,在看这本书的时候最好切换角色,把自己的思维转换成编译器开发者,去考虑问题,这样会容易理解些.(当然这样很难,就想着自己要解决什么样的问题好了) 1.在C++中,类的数据成员有两种:静态和 ...
- Erlang OTP gen_event
转自:http://www.myexception.cn/program/1569725.html Erlang OTP gen_event (0) 原英文文档:http://www.erlang.o ...
- 【Machine Learning in Action --4】朴素贝叶斯从个人广告中获取区域倾向
背景:广告商往往想知道关于一个人的一些特定人口统计信息,以便能更好地定向推销广告. 我们将分别从美国的两个城市中选取一些人,通过分析这些人发布的信息,来比较这两个城市的人们在广告用词上是否不同.如果结 ...
- xml 和json 数据格式及解析
来源:http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语:“科技以人为本”.任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的 ...
- px和em,rem的区别
任意浏览器的默认字体高都是16px. px: 像素(Pixel) , 计算机屏幕上的一个点.固定大小:不方便维护: em:相对于当前对象内 (父元素) 文本的字体尺寸.如当前对行内文本的字体尺寸未被人 ...
- 【第四篇】androidEventbus源代码阅读和分析
1,分析androidEventbus的注册源代码: 我们在使用androidEventbus的第一步是注册eventbus,如下代码: EventBus.getDefault().register( ...
- Xbox360自制系统GOD包安装教程
1.准备工作 U盘或移动硬盘一个,已下载好的GOD包,本教程用一个32G的U盘和游戏<猎天使魔女>为例. 右击U盘,属性,查看你的U盘是否为FAT32格式. 如果是FAT32格式,则可直接 ...
- windows做时间服务器，linux和windows时间同步
找了很多的资料,都没有windows做时间服务,linux同步windows的时间的,最后自己找了一些软件,终于搞定了,写出来给大家共享,以免大家多走弯路 首先在http://www.meinberg ...