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 ...
随机推荐
- LeetCode OJ 75. Sort Colors
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...
- 【code vs】 2780 ZZWYYQWZHZ
2780 ZZWYYQWZHZ 题目描述 Description 可爱的小管在玩吹泡泡.忽然,他想到了一种排序....... 输入描述 Input Description 第一行输入n,表示有n个数. ...
- Python使用shape计算矩阵的行和列
shape函数是numpy.core.fromnumeric中的函数,它的功能是读取矩阵的长度. 1 >>> a=mat([[1,2,3],[5,6,9]]); 2 >> ...
- 1.编写TextRw.java的Java应用程序，程序完成的功能是：首先向TextRw.txt中写入自己的学号和姓名，读取TextRw.txt中信息并将其显示在屏幕上。
package zuoye; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...
- 域名、网站名、url的定义
网址:http://jingyan.baidu.com/article/2c8c281df0afd00008252aa7.html
- toggle的使用心得
点击同一个标签可以实现不同效果 或者几个效果 以前一般都是if 判断的 逻辑还有判断比较繁琐 看啦手册后 发现这个功能可以不用判断的自动循环点击事件 比以前的简单好用 主要用法:$("td& ...
- ios沙盒查找图片展示
iOS如何找到自己的沙盒 在ios开发我们会用到沙盒,由于自己对沙盒理解的不够,所以找不到沙盒文件在哪里,当然要知道路径了 例如我的路径 NSString* cachepath = [NSHomeDi ...
- php 项目简单分类
项目分为:客户需求和自行研发. 商城项目:------------------------商城分类:单商家:商家就是网站所有者.如京东.凡客. 多商家:如淘宝 网站所有者不是卖家. ...
- git变基--rebase
变基过程: 两个分支 先考虑不用变基的合并: $ git checkout master $ git merge experiment 合并后: 如果变基:(以下为变基过程) $ git checko ...
- CSS3秘笈：第四章
第四章 继承 1.继承:应用在一个标签上的CSS样式被传到其内嵌标签上的过程. 2.继承的局限性: (1)有些属性不会被继承,如:CSS. (2)以下情况不会严格执行继承: ·影响网页元素位置的属性 ...