AngularJS快速入门教程应用例子源码下载

介绍

本文将讲解如何在开发中使用AngularJS、并写了一个例子、例子中涵盖了基本angularJS应用程序、包括基础的AngularJS的使用、Routing（路由）、AngularJS语法以及与数据服务的交互、本例子是在VS2012和.NET MVC框架下使用AngularJS的、希望对大家有帮忙、在使用AngularJS之前、你必须了解一些基础的知识、如：javascript、HTML、AngularJS是在加载完DOM对象之后开始执行的、AngularJS库可以从https://angularjs.org/下载 教程可以在https://builtwith.angularjs.org、下图说明了AngularJS的应用程序的生命周期

AngularJS生命周期

AngularJS框架具有以下几部分组成

要建立一个AngularJS应用程序、您需要一个web服务器来部署您的网页和AngularJS库、建立一个空的MVC项目、然后把AngularJS放到web项目中、如放到Scripts下面

代码

在开始执行之前、要从逻辑app.js文件查找路由、配置方式如下

.when(´´,{
	templateUrl: ´´,
	controller: ´´
})

app.js 文件

//angular.module("", []);
var appModule = angular.module("appModule", [´ngRoute´, ´demoControllers´]);
appModule.config([´$routeProvider´, function ($routeProvider) {
    $routeProvider.
    when(´/user´, {
        templateUrl: ´Content/NgUser.html´,
        controller: ´UserController´
    }).
	when(´/user/:userId´, {
		//userId - variable from URL
		templateUrl: ´Content/NgUserDetail.html´,
		controller: ´MessageController´
	}).
    when(´/message/:messageId´, {
        templateUrl: ´Content/NgMessageDetails.html´,
        controller: ´MessageDetailController´
    }).
	otherwise({
		redirectTo: ´/user´
	});
}]);

由于AngularJS是一个客户端JavaScript框架、它取决于数据服务的JSON形式为主、它内建的抽象从远程或本地服务读取数据、类似于JQuery的$.ajax函数

services.js文件

var demoServices = angular.module("demoServices", []);
demoServices.factory("UserService", ["$http", "$q", function ($http, $q) {
var serv = {};
// Return public API.
return ({
	GetAllUsers: GetAllUsers,
	GetUserDetail: GetUserDetail
});

function GetAllUsers() {
	//var req = $http.get(´/service/getusers´);
	var req = $http({
		method: "get",
		url: "/service/getusers"
		//params goes in url as query string
		//params: {
		//    id: id
		//},
		//data goes in the request body
		//For Post Body Parameters
		//data: {
		//    id: id
		//}
	});
	return req.then(handleSuccess, handleError);
}

function GetUserDetail(id) {
	//var req = $http.get(´/service/GetUserDetail´, params:{ "id" : id});
	var req = $http({
		method: "get",
		url: "/service/GetUserDetail",
		params: {
			id: id
		}
	});
	return req.then(handleSuccess, handleError);
}

// ---
// PRIVATE METHODS.
// ---
function handleError(response) {
	if (
		!angular.isObject(response.data) ||
		!response.data.message
		) {
		return ($q.reject("An unknown error occurred."));
	}
	// Otherwise, use expected error message.
	//return ($q.reject(response.data.message));
	return ($q.reject("hagjhsaggjasjgjagdj error"));

}

// from the API response payload.
function handleSuccess(response) {
	return (response.data);
}
}]);

Controllor编写业务逻辑和实现数据绑定到模型视图中、每个Controllor被注入（依赖注入到AJS框架）、其中包含的数据（属性、对象和函数）被注入到$scope对象

Scope（视图模型）是控制器和视图之间的桥梁、它携带的控制器的数据到视图*用户查看、并返回到控制器、AngularJS支持双向数据绑定、可以同时满足修改查看model和修改model查看

SCOPE - View Model

controllers.js文件

var demoControllers = angular.module("demoControllers", 
	[´demoServices´, ´demoFilters´]);
demoControllers.controller("HomeController", ["$scope", 
	"$http", function ($scope, $http) {
    $scope.pageHeading = ´this is page title.´;
    $http.get(´/service/getmessages´)
        .success(function (data) {
            $scope.messages = data;
        })
    .error(function () {
        alert("some error");
    });
}]);

demoControllers.controller("UserController", ["$scope", 
	"UserService", function ($scope, UserService) {
    $scope.pageHeading = ´behold the majesty of your page title´;
    //$scope.users = User.query();
    UserService.GetAllUsers().then(function (data) {
        $scope.users = data;
    });

    UserService.GetUserDetail(2).then(
         function (data) {
             $scope.users.push(data);
         });

    $scope.AddUser = function () {
        console.log($scope.newUser.name);
        console.log($scope.newUser.email);
        alert("User Added");
        //service call to save newly added user to db
        $scope.users.push({ name: $scope.newUser.name, 
			email: $scope.newUser.email });
        $scope.newUser.name = "";
        $scope.newUser.email = "";
    }
}]);

view

{{}}
Angular搜索上面的符号、并与同名变量$scope内的数据替换它们

Controller: ($scope.username = “Scott”;)
View:       {{ username }}. 
Output:     Scott.

其它指令

ng-view：从角相应的视图查看包含这个属性的元素中的路径替换数据、此属性用于在网站母版页

ng-app：用于deine模块的HTML块

ng-repeat：重复类似的foreach元素

ng-click：定义被称为元素的onClick功能

ng-model：双向数据绑定模型变量、创建（如果它不存在）例如：NG-模式="newUser.name" - 它创建了一个变量

ng-controller：定义一个控制器以用于在热媒一个范围

在这篇文章中、我们讨论了如何发展AngularJS一个示例应用程序、我们贴出了一些AngularJS提供了模块化和抽象的组件、另外大家可以下载例子的源代码去研究一下、如果你觉得对你帮助的话、记得评论一下哦

源代码下载链接:链接: http://dwtedx.com/download.html?bdkey=s/1qWCz5co 密码: svts