您的位置：首页 > Web前端 > AngularJS

AngularJs

2016-04-04 22:40 615 查看

AngularJs

AngularJs是一个不错的用于开发SPA应用（单页Web应用）的框架。单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，由JavaScript来控制不同view在这个页面上的呈现。本文源于Youtube上一个不错的AngularJs的入门教程视频：AngularJS Fundamentals In 60-ish Minutes，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和用法。个人认为这四个概念是AngularJs的核心，支撑起了AngularJs的骨架。掌握了他们对全局上把握AngularJs很有帮助。进阶则需要大量实践和官网API文档的阅读。

看看下图大致就可以了解AngularJs有何能耐。

View Code
View Code

View1.html
View2.html

通过$routeProvider来配置当前页面中view1 和view2 的路由，已经每个view所对应的controller。 view1和view2会显示在当前页面标注了ng-view的位置。

同时通过config我们解耦了controller和HTML标签。上面的例子，我们需要给html标签添加ng-controller tag来使用controller。这边直接通过config完成这样的配置。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>View</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

<script>
var demoApp = angular.module('demoApp', ['ngRoute']);

demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});

var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];

$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}

demoApp.controller(controllers);
</script>
</body>

</html>

效果如下图。

最后一个实例更接近实际工程中的用法，引入了Factory来初始化数据（实际工程中,在这里可访问webAPI获取数据完成初始化），Controller中则通过Factory获得数据。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Factory</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

<script>
var demoApp = angular.module('demoApp', ['ngRoute']);

demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/' });
});

demoApp.factory('simpleFactory', function () {
var customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];

var factory = {};

factory.getCustomers = function ()
{
return customers;
}

return factory;
});

var controllers = {};
controllers.SimpleController = function ($scope, simpleFactory) {
$scope.customers = [];

init();

function init() {
$scope.customers = simpleFactory.getCustomers();
}

$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}

demoApp.controller(controllers);
</script>
</body>

</html>

分类: javaScript

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航