关于AngularJS的初步使用

Posted 2020-11-15 贝勒丶

一丶基本使用mvc模式(<script src="angular.min.js"></script>)
　　model:数据,可以实现双向绑定,全局通用,即为Angular变量,格式为$scope.xx

　　view:数据的呈现,html与指令(Directive)相结合 

　　controller:操作数据,就是利用function操作,实现与增删改查

二丶创建model,controller与service

　　　1.var app = angular.model("自定义木块名",["应用的模块"])

　　　2.app.service("自定义服务名称",function($http)){this.方法名称=function(参数){return服务链接,如与后台交互的连接}}

　　　　　　　　示例:　　app.service("brandService",function ($http) {

　　　　　　　　　　　　　　　　this.findAll=function(){

　　　　　　　　　　　　　　　　　return $htttp.get("交互的url")}

　　3.app.controller("自定义控制器名称",function($scope,服务器名称)){控制层,操作数据}

　　　　　　　　示例:$scope.findAll=function () {

　　　　　　　　　　　　服务名称.方法名().success(function (response){

　　　　　　　　　　　　　　　　$scope.list=response;}

　　4.三层分别定义在不同的js文件中，但是如果有依赖关系，在页面引入相关js文件时注意上下位置。如定义模块app的js 文件应该位于service和controller上边。

三丶一些简单的指令

　　1.ng-app="模块名"  启用一个模块,声明在body标签中,在该标签内部的angular指令才会被解析识别

　　2.ng-controller="控制器名" 使用在body标签中,告知该body内容由该控制器来控制

　　3.ng-init="eg:name=.."  用来初始化变量 

　　4.ng-model="变量" 在标签内部定义变量,实现双向绑定,在controller中使用

　　5.ng-repeat="变量名 in 集合"  遍历数据,集合为controller中定义出来

　　6.$event为标签状态,一般作为参数传递给controller中,比如复选框的选中状态 $event.target.checked

四丶控制器继承

　　伪继承，使两个$scope通用，从而达到继承的效果。

　　格式：$controller("被继承的控制器",{$scope:$scope})