【AngularJs】模块和控制器

最新推荐文章于 2024-08-22 09:20:35 发布

陶洲川

最新推荐文章于 2024-08-22 09:20:35 发布

阅读量1k

点赞数

分类专栏：【基础】【Angular】文章标签： angularjs 模块控制器 model controller

本文链接：https://blog.youkuaiyun.com/River_Continent/article/details/78546335

版权

【基础】同时被 2 个专栏收录

229 篇文章

订阅专栏

【Angular】

19 篇文章

订阅专栏

1、MVC

Model，View，Ctroller，模型，视图，控制器；

模型是model，绑定的数据的一个对象；
视图是我们看到的内容；
控制器是逻辑代码，事件监听部分；

2、基本语法

angular.module(“myApp”,[]);
angular调用module()方法来创建一个组件；组件有两个参数；第一个“myApp”是项目名称；第二个参数是需要注入的依赖，通常是系统封装好的一些依赖，比如：

'use strict';

angular.module('app', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngSanitize',
    'ngTouch',
    'ngStorage',
    'ui.router',
    'ui.bootstrap',
    'ui.utils',
    'ui.load',
    'ui.jq',
    'oc.lazyLoad',
    'angularShiro',
    'ui.grid',
    'ui.grid.selection',
    'ui.grid.pagination',
    'ui.grid.resizeColumns',
    'ui.grid.treeView',
    'ui.grid.edit',
    'ui.grid.rowEdit',
    'ui.grid.cellNav',
    'ui.grid.validate',
    'w5c.validator',
    'blueimp.fileupload',
    'ui.bootstrap.datetimepicker',
    'ui.tinymce',
    'daterangepicker',
    'toaster'
]);

中括号里面的都是需要注入的框架的一些依赖；

3、开始创建

①angular.module(“myApp”,[]);如果没有依赖，可以不写，也就是不需要注入依赖；
②html页面上要告诉html，angular的作用域和controller的作用域；angular的作用域用ng-app来标注：ng-app=”我自己对应的项目名称，例如myApp”，在标有该语句的标签范围内都可以使用angular.js；这里要和controller控制层的app名要对应，不然html页面上的数据，和其逻辑控制代码就失控了；
③控制器：

app.controller('StudentInfoController', ['$scope', '$state', '$stateParams','studentInfoService', '$uibModal', '$q',
        function($scope, $state, $stateParams,questionService, $uibModal, $q) {
        //逻辑代码
}])

这里的'StudentInfoController', ['$scope', '$state', '$stateParams','studentInfoService', '$uibModal', '$q', 这里都是如要注入的依赖，其中美元符号开头的都是服务，还包括一个自己创建的Service服务，还有一个function方法函数；

④html页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angular</title>
<script src="angular"></script>
</head>

<body ng-controller="ctrl">
//页面展示部分
<h1>{{name}}</h1>
</body>

//可以单独拎到JS中
<script>
 var myApp = angular.module("app",[]);
 myApp.controller("ctrl",["$scope",function($scope){


 }]);
 //$开头的都是服务；$scope是上下文，视图控制器之间的通道；Model和View之间的桥梁；
 $scope.name="二狗子";
</script>

</html>