如何利用AngularJS打造一款简单Web应用
2个回答
展开全部
在着手利用AngularJS创建这款简单的小Web应用之前，大家首先需要下载angular-seed项目。下载完成之后，大家需要打开对应的下载目录并安装其中的关联性以实现运行。具体代码如下所示：
$ cd angular-seed $ npm install ## Install the dependencies
下一步则是利用以下代表启动节点服务器：
$ npm start ## Start the server
节点服务器启动并开始运行之后，我们需要打开浏览器并访问http://localhost:8000/app/index.html，此时其中会显示正在运行的默认应用。
接下来访问angular-seed项目文件夹下的该应用目录，应用程序的代码就保存在这里。
作为该应用程序的核心，app.js也将存放在该应用文件夹内。所有应用层级的模块与app.js内的路由都需要进行声明。
另外，大家还会在这里找到angular-seed的两个视图，即view 1与view 2。它们始终以默认形式存在。我们需要在应用文件夹中将这些视图删除。
现在开始我们要从零开始创建应用程序了：大家首先需要打开app.js并删除其中的全部已有代码。在app.js当中定义我们的应用程序路由，这要求大家使用ngRoute，AngularJS当中的模块之一。默认情况下app.js并不包含该模块，因此我们需要手动将其注入至应用程序当中从而加以使用。大家可以利用以下代码完成该AngularJS模块的添加工作：
angular.module('myApp', [
'ngRoute'
])
ngRoute模块将带来一项重要的组件，即$routeProvider，其能够完美地对路由进行配置。我们需要使用以下代码将$routeProvider注入至angular-module的配置方法当中，从而完成路由定义：
'use strict';
angular.module('myApp', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
// Routes will be here
}]);
完成以上步骤后，现在我们就可以打开index.html了。将index.html当中的全部内容清除，只保留脚本引用以及div。
每一次进行路由变更时，我们都需要按照以上方法对div内容进行调整。
在视图当中创建符号
我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中，我们额外再创建两个文件夹，分别为home.js与home.html。首先打开home.html并将以下代码添加进去：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="http://getbootstrap.com/favicon.ico"> <title>AngularJS & Firebase Web App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> <link href="justified-nav.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="jumbotron" style="padding-bottom:0px;"> <h2>AngularJS & Firebase App!</h2> </div> <form class="form-signin" role="form"> <input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="Password" required=""> <label class="checkbox"> <a href="#"> Sign Up</> </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> </body></html>
在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：
use strict'; angular.module('myApp.home', ['ngRoute']) // Declared route .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/home', { templateUrl: 'home/home.html', controller: 'HomeCtrl' }); }]) // Home controller .controller('HomeCtrl', [function() { }]);
现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：
'use strict'; angular.module('myApp', [ 'ngRoute', 'myApp.home' // Newly added home module ]). config(['$routeProvider', function($routeProvider) { // Set defualt view of our app to home $routeProvider.otherwise({ redirectTo: '/home' }); }]);
如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：
<script src="home/home.js"></script>
现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面，在这里大家可以实现对该应用程序的访问。
如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。
$ cd angular-seed $ npm install ## Install the dependencies
下一步则是利用以下代表启动节点服务器：
$ npm start ## Start the server
节点服务器启动并开始运行之后，我们需要打开浏览器并访问http://localhost:8000/app/index.html，此时其中会显示正在运行的默认应用。
接下来访问angular-seed项目文件夹下的该应用目录，应用程序的代码就保存在这里。
作为该应用程序的核心，app.js也将存放在该应用文件夹内。所有应用层级的模块与app.js内的路由都需要进行声明。
另外，大家还会在这里找到angular-seed的两个视图，即view 1与view 2。它们始终以默认形式存在。我们需要在应用文件夹中将这些视图删除。
现在开始我们要从零开始创建应用程序了：大家首先需要打开app.js并删除其中的全部已有代码。在app.js当中定义我们的应用程序路由，这要求大家使用ngRoute，AngularJS当中的模块之一。默认情况下app.js并不包含该模块，因此我们需要手动将其注入至应用程序当中从而加以使用。大家可以利用以下代码完成该AngularJS模块的添加工作：
angular.module('myApp', [
'ngRoute'
])
ngRoute模块将带来一项重要的组件，即$routeProvider，其能够完美地对路由进行配置。我们需要使用以下代码将$routeProvider注入至angular-module的配置方法当中，从而完成路由定义：
'use strict';
angular.module('myApp', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
// Routes will be here
}]);
完成以上步骤后，现在我们就可以打开index.html了。将index.html当中的全部内容清除，只保留脚本引用以及div。
每一次进行路由变更时，我们都需要按照以上方法对div内容进行调整。
在视图当中创建符号
我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中，我们额外再创建两个文件夹，分别为home.js与home.html。首先打开home.html并将以下代码添加进去：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="http://getbootstrap.com/favicon.ico"> <title>AngularJS & Firebase Web App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> <link href="justified-nav.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="jumbotron" style="padding-bottom:0px;"> <h2>AngularJS & Firebase App!</h2> </div> <form class="form-signin" role="form"> <input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="Password" required=""> <label class="checkbox"> <a href="#"> Sign Up</> </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> </body></html>
在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：
use strict'; angular.module('myApp.home', ['ngRoute']) // Declared route .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/home', { templateUrl: 'home/home.html', controller: 'HomeCtrl' }); }]) // Home controller .controller('HomeCtrl', [function() { }]);
现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：
'use strict'; angular.module('myApp', [ 'ngRoute', 'myApp.home' // Newly added home module ]). config(['$routeProvider', function($routeProvider) { // Set defualt view of our app to home $routeProvider.otherwise({ redirectTo: '/home' }); }]);
如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：
<script src="home/home.js"></script>
现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面，在这里大家可以实现对该应用程序的访问。
如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-11-23 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
angularjs是一个前端web框架，官方文档和教程都比较多，可以看下:
英文文档：
中文：
angular.js的含义 前端框架的意思是，在前端用js来动态控制输出的内容。这样即使后端不太复杂，前端也能实现许多以前只能后端实现的功能。angular是mvvm结构，应该很容易明白。具体操作有：数据绑定（动态显示数据）、dom控制（迭代或者动态显示隐藏）、表单验证、把逻辑写到前端来、将html划分成组件以复用。
所以，如何利用angularjs打造web应用：利用angular动态控制页面展示内容与交互，实现不同的功能。
英文文档：
中文：
angular.js的含义 前端框架的意思是，在前端用js来动态控制输出的内容。这样即使后端不太复杂，前端也能实现许多以前只能后端实现的功能。angular是mvvm结构，应该很容易明白。具体操作有：数据绑定（动态显示数据）、dom控制（迭代或者动态显示隐藏）、表单验证、把逻辑写到前端来、将html划分成组件以复用。
所以，如何利用angularjs打造web应用：利用angular动态控制页面展示内容与交互，实现不同的功能。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
