Angular1 基础知识浅析，含锚点

2023-06-18 23:33•css•阅读 217

1.angular：前端js框架https://angularjs.org

①SPA单页应用程序

通过ajax从后台获取数据，动态渲染页面，不出现白屏，提高效率，节省流量

（1）锚点值

锚点：是网页制作中超级链接的一种，又叫命名锚记。锚点像一个迅速定位器一样是一种页面内的超级链接。使用锚点可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些锚点的链接，这些链接可快速将访问者带到指定位置。

示例：

在HTML页面中适当位置定义如下的锚点：

<div > <div > <div > （可以使用 name 属性来替代 id 属性，命名锚点同样有效。）

利用超链接标签<a></a>制作锚点链接，主要用于页面内的锚点访问

<a href="#top">点击我链接到TOP</a>

<a href="#content">点击我链接到CONTENT</a>

<a href="#foot">点击我链接到FOOT</a>

点击锚点连接，将锚点对应的id内容显示在window中

在动态页面制作中，主要通过点击锚点连接后，页面地址栏会添加相应的锚点值，可通过这个锚点值从后台动态的获取对应的数据，再渲染到页面上，实现页面内容的更改

动态获取页面的锚点值：添加hashchange事件，监听锚点值改变

window.addEventListener("hashchange", function() {

var hash = location.hash

})

②angular基本指令：ng-开头的属性叫指令

ng-app：需要在angular管理的代码的父元素上添加这个属性

ng-click：给该元素添加点击事件

ng-model =“val”：给文本框添加这个指令，相当于把value值付给val变量，如果input的type是checkbox，val设置成一个boolean值变量，可实现切换选中功能

ng-class =“{‘className1’:false , ’className2’:true , ’className3’:true}”：给元素设置样式类名，false表示不添加，true表示添加

ng-checked：表示单选、复选框是否被选中

ng-selected：表示下拉框是否被选中

ng-disabled：表示是否被禁用

ng-readonly：表示是否只读

ng-src：在引用img标签时，如果不使用这个指令，直接使用src，浏览器会先解析这个路径下的内容，如果内容是表达式形式添加的，例如：src=”{{item.images}}”，系统会报404错误，改为ng-src即可

事件绑定指令：

ng-click：点击事件 ng-change：改变事件 ng-copy：复制事件

ng-blur：失去焦点 ng-dblclick：双击事件 ng-submit：表单提交事件

…….

动态输出代码演示：

<p> {{“输入内容:” + user.name}}</p> 也可以写成这种形式，表达式语法

</body>

ng-init=“user.name=’Tom’”：给ng-model=”user.name”指令初始化

处理表达式闪烁：

ng-bind只能在双标签中使用，如<input>不能使用，双标签中不能写任何内容

ng-bind =“val”：用<p ng-bind=”val”></p>替换{{val}}表达式，可以解决闪烁问题

ng-cloak <p class = “ng-cloak”>{{val}}</p>，因为angular在加载完成之后会移除类名为ng-cloak的所有内容，由于，表达式在移除之前就加载好了，所以最好既有表达式的效果，又不会将表达式原始内容在页面上闪烁显示

渲染json格式或者数组格式的数据：ng-repeat遍历渲染数据

item是随意设置的变量，data是需要渲染的数据名，如果数据中有重复的元素就需要添加track by $index指令，否则会报错

{{item.name}}: {{item.age}}

ng-class =“{‘A’:’red’ , ‘B’:’blue’ , ‘C’:’green’}[item.class]”给每个元素遍历设置相应的类名所对应的样式，此处red、blue、green都是类名

ng-hide =“item.class==’A’”隐藏class为A的这个元素

ng-show =“item.class==’A’”显示class为A的这个元素

ng-if =布尔值为true时显示当前元素，为false时删除当前

ng-switch: 与ng-switch-when同用，用法类似于js中的switch case

</li>

</ul>

</div>

var demo=angular.module("demoMod",[]);

demo.controller("demoController",function($scope) {

$scope.data=[

{name:"Tom",age:20,class:’A’},

{name:"Mark",age:18,class:’B’},

{name:"Lucy",age:19,class:’C’}

];

});

ng-repeat下的元素具备一些angular属性，可以在chrome中安装AngularJS Batarang 查看这些属性，例如$even，$odd，$first，$last，$middle

指令在H5标准下使用：data-

在指令前加上data-即可，例如data-ng-app，data-ng-model

③自定义指令：

<div my-btn>内容</div> 此处引入的my-btn必须与自定义属性的名字相对应

var app = angular.module("demoMod", []);

app.directive('myBtn', [

引入自定义属性：directive，myBtn是指令的名字，必须按照驼峰命名法命名

function() {

var obj = {

template: '<button>btn</button>'

在具有my-btn指令的标签之中创建上述模板

templateUrl: './test.html’

这个属性，可以将test.html文件中的html引用到具有my-btn指令的标签之中

templateUrl: 'tpl’

在页面中指定一个type为text/ng-template的<script>标签，id为tpl，上述指令能加载到这个<script>标签中的内容，标签如下：

<script type = “text/ng-template”id= “tpl”>

<button>btn</button>

</script>

restrict: 'ECAM’

这个属性表示指令在标签中设置成什么形式，A：以属性的形式、C：以类名的形式例如：<div class = “my-btn”></div>、E：以自定义标签的形式例如：<my-btn></my-btn>、M：以注释的形式使用。该属性可以设置成A、E、C、M中的任意一个或多个

replace: true

这个属性表示，将具有my-btn指令的标签全部替换成模板字符串，而不是在其innerHTML中添加模板字符串，主要用于单标签不具备innerHTML

transclude: true转置

这个属性表示，将具有my-btn指令的标签的innerHTML添加到模板字符串，不能与replace同用，且要添加该innerHTML的模板字符串标签需要添加ng-transclude指令<divng-transclude></div>

scope:{

mytest: ‘@test’,

设置一个任意属性，例如：mytest，对其赋任意值，必须以@开头，例如：@test，然后给具有my-btn指令的标签，设置test值，例如<divmy-btntest= “btn-primary”></div>，这里的“btn-primary”相当于是类名，其他标签可以动态引用这个类名，<button ng-transclude class = ‘’{{mytest}}”></button>

test:’@’这是上述方法的简写模式

}

link: function(scope,element,attributes){包含3个参数的函数

scope类似于控制器中的$scope

element具有my-btn指令标签的jqLite对象（包含jQuery方法）

attributes具有my-btn指令标签的所有属性集合

element.on(‘click’,function(){

console.log(this);

})

scope.name = “Tom” <p>{{name}}</p>

}

};

returnobj;

}

]);

</div>

④angular中写js代码

（1）创建模块

angular.module(‘demoMod’, [ ]) 写在<script>标签中

如果不传递[ ]空数组，angular.module(‘demoMod’)表示获取demoMod这个对象

（2）创建控制器

给标签元素设置相应的控制器，和模块指令：

<div ng-app = “demoMod” ng-controller = “demoController”>

在模块demoMod下创建控制器demoController：写在<script>标签中

var app =angular.module(‘demoMod’, [ ]);

app.controller(‘demoController’ ,[‘$scope’ , ‘$log’ , ‘$location’ , ‘$http’ , function($scope , $log , $location , $http){

$scope是angular提供的整个数据模型对象，可以通过他操作dom对象，设置的dom都可以看做是他的属性

$log和console一样，输出写法：$log.log( )

$location.url()获取页面的锚点值，不包含#号，可通过$watch监视变化

angular中的ajax请求，需要调用参数$http，其中then属性包含两个函数，第一个是成功时的回调函数，第二个是失败时的回调函数

$http.get(‘/demo/app/demo_data/data.json’).then(function(res){这是请求成功的回调函数

$scope.data = res.data

},function(){这是请求失败的回调函数

})

$scope.user = {};

$scope.user.name = “Tom”创建初始模型，类似使用ng-init

$scope.$apply()在数据改变之后调用，强制angular监视数据模型，可用于异步请求之中

$scope.$watch("name",function(nowValue,oldValue) {

console.log(nowValue)

console.log(oldValue)

}, true])

$watch( )是$scope的属性，用于监听$scope的相关属性的改变，第一个参数是需要监听的属性；第二个参数是回调函数，回调函数中第一个参数是该属性改变后的值，第二个参数是该属性改变前的值；$watch( )中第三个参数true表示深度监听，数据中每个对象的所有属性变化都会被监听

})

（不推荐）旧版本控制器的创建方法：声明一个全局函数即可

function demoController ( $scope ){ $scope.name = “Tom” }

构造函数方式创建控制器：

<div ng-app = “demoMod” ng-controller = “demoController as obj”>

{{obj.name}}

</div>

var app =angular.module(‘demoMod’, [ ]);

app.controller(‘demoController’ , function($scope){

this.name = “Tom”;由于启用了构造函数对象obj，所以这里可以用this指向这个obj

})

方便代码压缩的方式创建控制器（依赖注入）：

app.controller(‘demoController’ ,[‘$scope’ , ’$log’, function(a,b){ }])

由于$scope、$log是angular提供的固定写法的参数，在用工具压缩代码时会被替换成a、b但，后续代码不能识别所以会报错，angular提供了上述数组的写法，以字符串的形式存储这两个参数，可以保证在代码压缩时不会被替换

（3）创建服务service

创建服务：

var app =angular.module(‘demo.service’, [ ]);

app.service(‘DemoService’ , [‘$window’,function($window){

this.name = “Tom”;

var storage =$window,localStorage;

此处的$window是angular提供的window对象，和BOM中的window对象一致，可以通过$window，获取页面的localStorage对象

storage.getItem(‘demoKey’);可以调用localStorage的getItem方法

} ])

service中的回调函数，会被当做构造函数来使用，在将其作为参数引用的控制器中，可以得到这个构造函数创建的对象

创建控制器：

var app =angular.module(‘demo.controller’, [ ]);

app.controller(‘demoController’ , [‘$scope’ , ‘$location’ , ‘DemoService’, function($scope , $location ,DemoService){ console.log(DemoService) }])

此处的打印结果为：object{name: ’Tom’}，即可以获得service中回调函数，创建的对象

（4）angular中通过js向页面渲染字符串标签”<div>value</div>”

首先要引用angular的扩展模块sanitize angular-sanitize.js

</div>

var demo=angular.module("demoMod",['ngSanitize']);

在demoMod模块中引入ngSanitize模块

demo.controller("demoController",[ ‘$scope’ , function($scope) {

$scope.name="<div>Tom</div>";

}]);

⑤angular路由

使用路由之前先安装路由模块：npm install angular-route –save

引入angular.js和angular-route.js

<div ng-view></div> ng-view指令，用来指导template模板的插入

var app = angular.module('demoApp',['ngRoute']); 指定使用ngRoute模块

app.controller(‘nameController’ , [‘$scope’ , ‘$routeParams’,‘$route’, function($scope , $routeParams , $route){

console.log($routeParams)

$routeParams为锚点参数对象，如果在when中传入了相应的属性，例如：'/name/:name'，那么这个对象就可以拿到name属性，值为传入的锚点值

$route.updateParams({name:’Jack’})

$route.updateParams用于更新路由参数，这个方法需要传入一个对象，这个对象需要包含一个路由参数作为属性，例如本案例中设置的:name，使用了该方法后，页面会跳转到其设置的锚点值位置

}])

app.config(['$routeProvider',function($routeProvider){

$routeProvider是angular提供的用来设置规则的对象

$routeProvider.when('/name/Tom',{

when，方法包含两个参数，第一个/name/Tom是锚点值，第二个是一个对象，里面包含很多属性，用法和自定义指令基本类似

也可以写成'/name/:name?'，这样可以在控制器中拿到$routeParams包含name属性的对象，这个属性的值就是传入的锚点值，?表示即使没有传入name锚点值，也可以匹配到，即这个参数可以不写，不会出现问题

template: '<p>这是插入的controller变量{{name}}</p>'

template内容插入到包含ng-view指令的标签中，此demo插入到上述div中

controller: 'nameController'

指向一个controller的名字，使when中可以使用这个controller提供的变量例如：{{name}}

}). when('/name/Jack',{

templateUrl: '/template/view.html'

可以不断使用when方法，给不同的锚点设置不同的内容，templateUrl引用路径从主模块所在路径开始计算，即模板要添加到哪个文件，就从这个文件计算

}). otherwise({ 指定所有when没有设置的锚点值，跳转到固定页面

redirectTo: '/name/’ 这是没有设置的锚点，跳转的页面

})

}])

</script>

</body>

⑥angular中DOM操作（jqLite：具备jQuery方法的对象）

var $ = angular.element; 开启轻量级jQuery的DOM操作

$(document).ready(function() {

var test=$(document.getElementById("test")); 需要传入原生js

console.log(test);

test.addClass("class"); 可以使用类似jQuery的方法

console.log(test);

})

⑦过滤器（filter）

货币过滤器：<p>{{myMoney | currency: ￥}}</p> 不传参数￥，默认是$

日期过滤器：<p>{{myDate| date: ’yyyy年MM月dd日 hh:mm:ss’}}</p>

冒号后是参数，不传参数，默认是英文格式日期

字符串限制过滤器：<p>{{str | limitTo: 5: 2}}</p>从索引为2开始，显示5个字符

json过滤器：<p>{{myJson| json: 6}}</p>表示前面有6个空字符的，格式化json

排序过滤器：<p ng-repeat = “item in myArr | orderBy : ‘age’”> 表示输出数据时按照数组中age值的大小，从小到大排序，参数改成-age，则从大到小排序

filter过滤器：<p ng-repeat = “item in tasks | filter : { completed: false }”> 表示选择数据中completed属性为false的对象输出，如果不使用{ completed: false }对象参数，直接写filter:false，表示全局匹配包含字符串”false”的数据输出

在js中使用过滤器：

在控制器中传入过滤器:

controller(‘demoController’ ,[‘$scope’, ’$filter’, function(a,b){ }])

$scope.tmp = $filter(‘date’)($scope.myDate , ‘yyyy年MM月dd日hh:mm:ss’ )

⑧angular被称为：MVC框架

M：Model模型存储数据

V：View视图包含html标签代码，用来展示数据

C：Controller控制器调度业务逻辑，处理用户交互

MVVM框架：Model-Veiw-VeiwModel

由于angular中$scope和VeiwModel类似，所以也有说法认为angular是MVVM框架

⑨CDN内容分发网络（第三方服务器提供的文件路径）

src = "http://apps.bdimg.com/libs/ angular-material/ 0.9.6/angular-material.js" ></script>

可以引用第三方，例如百度的cdn静态资源库，也同样可以实现angular的功能

上一篇 »javascript 基础知识
下一篇 »JavaScript基础知识十三，原型链模式基础

Angular1 基础知识 浅析，含锚点

1.angular：前端js框架https://angularjs.org

①SPA单页应用程序

②angular基本指令：ng-开头的属性叫指令

③自定义指令：

④angular中写js代码

⑤angular路由

⑥angular中DOM操作（jqLite：具备jQuery方法的对象）

⑦过滤器（filter）

⑧angular被称为：MVC框架

⑨CDN内容分发网络（第三方服务器提供的文件路径）

相关推荐

JavaScript 基础知识6 函数表达式 - PerfectData

【JavaScript你需要知道的基础知识~】

javascript基础知识大全，1

PHP 基础知识总结

《PHP基础知识总结》系列分享专栏

python基础-基础知识考试_day5 ，包括：函数_递归等知识

python基础-基础知识考试_day5 ，包括：函数_递归等知识

Angular2、4入门基础知识，小的概念

Angular1 基础知识浅析，含锚点