关于AngularJS的初步使用

Posted 贝勒丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于AngularJS的初步使用相关的知识,希望对你有一定的参考价值。

一丶基本使用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})

  

以上是关于关于AngularJS的初步使用的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS初步

关于angularjs的简单使用

AngularJS的简单实用

angularJs关于指令的一些冷门属性

AngularJs关于route的使用方法和配置

关于AngularJS: