前言

之前接触过基本的AngularJS，虽然未深入，但本系列将重点介绍AngularJS的核心内容，涵盖模块、控制器、服务等关键部分，并通过实例展示其使用方法。在实际项目中曾用过Avalon，但因其不被广泛采用而放弃。相比之下，AngularJS作为业界流行的前端框架，广泛应用于开发复杂的单页应用，招聘市场对其要求普遍较高，这也是学习它的主要动机之一。每次敲写代码的过程都充满乐趣，仿佛在探索未知的领域，体验前所未有的成就感。

简短介绍

AngularJS是一款基于MVVM（模型-视图-控制器）架构的前端框架，提供了强大的数据绑定、路由功能和依赖注入（DI）等特性，极大地简化了前端开发过程。它支持客户端单元测试，能够处理复杂的UI开发任务。AngularJS应用程序在用户设备上运行时，将同时加载Model、View和Controller，并通过$rootScope等机制实现它们的深度结合。

HelloWorld

学习任何新技术，HelloWorld总是第一步。在AngularJS中，我们通过以下代码实现这一功能。

var app = angular.module('myApp', []);

app.controller('ctrl', ['$scope', function($scope) {    $scope.greeting = {text:"Hello"};}]);

同时，我们需要定义UI页面：

                                    {{greeting.text}},World

最终效果为：

Hello,World

$scope与Controller

了解$Scope和Controller的关系，可以通过以下实例来体会。

UI页面：

                                    Your Name : {{name}}

对应的JS代码：

app.controller('ctrlName', function ($scope) {      $scope.name = '';  });

效果展示：

Your Name :

Controller as语法

从AngularJS 1.1.5版本起，支持Controller as语法，简化了开发流程。以下是使用该语法的实现：

UI页面：

                                    {{u.username}}
      请输入你的名字 :
              你的名字是 : {{u.name}}

对应的JS代码：

app.controller('myCtrl', function () {    var self = this;    self.name = "";    self.username = "xpy0928";});

效果展示：

请输入你的名字 :

你的名字是 : xpy0928

转载地址：http://bmlzz.baihongyu.com/

你可能感兴趣的文章

OpenMMLab | 不是吧？这么好用的开源标注工具，竟然还有人不知道…