尝试使用angularjs

本周完成了新项目两个issue,由于是前台使用的是angularjs,而不是以往的angular,文件结构也不太相同。所以出现着:angularjs不熟悉,代码无从下手的情况。 在经过摸索之后,对于angularjs有了一个大致的了解,能够逐渐开始写代码。小小地记录一下。

比如当时看到js文件中的代码,还不太懂这么定义的意思。

模块

我们可以从这张图,来初步了解angularjs的结构。 同时,我们按照从上到下的顺序,介绍他们。

模块包含了主要的应用代码。
一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码。
可以将module理解成一个容器,可以往其中放入controllers、services、filters、directives等应用的组成部分。

例如:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

添加config routes

import * templateAbout from './about.html'
import * templatePerson from './person.html'
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider) {
 $stateProvider
 .state({
 name: 'person',
 url: '/person',
 controller: 'personCtrl'
 template: templatePerson
 })
 .state({
 name: 'about',
 url: '/about',
 template: templateAbout
 controller: 'aboutCtrl'
 })
});

添加控制器

定义控制器:

app.controller('personCtrl', function($scope) {
}

第一个参数是控制器的名字

第二个参数是一个function, 参数代表 controller 依赖注入的service、值等。

比如说,我们可以将service以及值注入进去:

app.value("defaultInput", 5);
app.controller('personCtrl', function($scope, CalcService, defaultInput) {
}

代码示例:

<div ng-app="myApp" ng-controller="personCtrl">
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
 $scope.fullName = function() {
 return $scope.firstName + " " + $scope.lastName;
 }
});
</script>

控制器的含义和angular中的差不多。 初始看代码的时候,比较令我费解的还是 $scope 这个属性, 不太了解它的作用。 但是看样子,它能起到 view 与 controller 之间的交互作用。

Scope(作用域)

从图中可以看出来:

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

<div ng-app="myApp" ng-controller="personCtrl">
 <input ng-model="name">
 <h1>{{name}}</h1>
 <button ng-click='changeName()'>改变名字</button> 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
 $scope.name = "张三";
 $scope.changeName = function() {
 $scope.name = "李四";
 };
});
</script>

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

视图中,不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{name}}。


根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。



获取$rootScope示例:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>$rootScope中rootAttr的值为:{{rootAttr}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
 $rootScope.rootAttr = "Refsnes";
});
</script>

directive 指令

其含义和angular中差不多,

比如一些内置指令:

ng-app 指令初始化一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

自定义指令:

<body ng-app="myApp">
<my-directive></my-directive> <!-- 用法1:元素名-->
 
<div my-directive></div> <!-- 用法2:属性 -->
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
 return {
 template : "<h1>自定义指令!</h1>"
 };
});
</script>
</body>

Service 服务

比如: 可以使用自定义的的服务 hexafy 将一个数字转换为16进制数:

定义service:

app.service('hexafy', function() {
 this.myFunc = function (x) {
 return x.toString(16);
 }
});

注入并使用:

app.controller('myCtrl', function($scope, hexafy) {
 $scope.hex = hexafy.myFunc(255);
});

总结

最后写代码的时候其实也有挺多看不懂的, 大概理解它是什么功能之后,开始抄其他文件中代码。 之后再打点,修bug。需要多看,多实践。

菜鸟教程:https://www.runoob.com/angula...

作者:weiewiyi原文地址:https://segmentfault.com/a/1190000042778237

%s 个评论

要回复文章请先登录注册