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 ...
随机推荐
- LYNC2013介绍和基础架构准备角色
LYNC2013部署系列PART1:LYNC2013介绍和基础架构准备 前言:LYNC 2013发布已经很久了,本人一直在进行相关的学习和测试,在有限的资源条件下,把能够模拟出来的角色进行了安装部署, ...
- Ecstore1.2启用mongodb添加索引
配置config(连接mongo) mongo define('KVSTORE_STORAGE', 'base_kvstore_mongodb'); define('MONGODB_SERVER_CO ...
- 转 shell awk 使用详解
awk简介 awk: 中文意思是报告生成器 能够根据我们输入的信息,将信息格式化以后显示,将定义好的信息以比较美观(直观)的方式显示出来出现比较早,继而出现了new awk(nawk)在windows ...
- vs中的各种快捷键
1. VS注释与取消注释快捷键 CTRL + K , CTRL + C(注释) CTRL + K , CTRL + U(取消注释)
- juniper防护墙接口的NAT和ROUTE模式如何选择问题
juniper防护墙一般是把trust接口部署为NAT模式,untrust接口部署为route模式.这样当来自内部的数据访问Utrust区域时,会把源地址翻译成untrust接口的地址.从而达到隐藏内 ...
- Neutron网络性能测试与分析（一） CVR
测试环境:网络节点运行在Intel(R) Xeon(R) CPU E5-2630 v3服务器上,网卡使用intel的万兆卡82599ES 测试仪使用本人基于dpdk编写的程序,基本上可以打满万兆卡,小 ...
- PHP通过url下载远程图片到本地
function GrabImage($url,$filename) { if($url==""):return false;endif; ob_start(); readfile ...
- unity Mesh(网格)的使用
创建两个三角形合成的矩形网格: GameObject obj= new GameObject(); MeshRenderer meshRenderer=obj.AddComponent<Mesh ...
- EditText光标居上
<EditText android:id="@+id/shareContent_editText" android:layout_width="wrap_conte ...
- vmware 安装提示the msi failed
原因是卸载不干净,使用批处理bat文件卸载,然后重启即可. VMware workstation 10.0序列号:MA491-6NL5Q-AZAM0-ZH0N2-AAJ5A 百度云文件:http:// ...