概述
单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用
简单应用
我们打算创建一个简单的应用,涉及主页,关于和联系我们页面。虽然Angular是为创建比这更复杂的应用而生的,但是本教程展示了许多我们在大型项目中需要的概念。
目标
- 单页应用
- 无刷新式页面变化
- 每个页面包含不同数据
虽然使用Javascript和Ajax可以实现上述功能,但是在我们的应用中,Angular可以使我们处理更容易。
文档结构
- - script.js
- - index.html
- - pages
- ----- home.html
- ----- about.html
- ----- contact.html
HTML页面
这一部分比较简单。我们使用Bootstrap和Font Awesome。打开你的index.html文件,然后我们利用导航栏,添加一个简单布局。
<!-- index.html --> <!DOCTYPE html> <html> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <!-- load angular via CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="script.js"></script> </head> <body> <!-- HEADER AND NAVBAR --> <header> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">Angular Routing Example</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> </ul> </div> </nav> </header> <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> </div> <!-- FOOTER --> <footer class="text-center"> View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a> </footer> </body> </html>
在页面超链接中,我们使用"#"。我们不希望浏览器认为我们实际上是链接到about.html和contact.html。
Angular应用
模型和控制器
此时我们准备设置我们的应用。让我们先来创建angular模型和控制器。关于模型和控制器,请查阅文档已获得更多内容。
首先,我们需要用javascript来创建我们的模型和控制器,我们将此操作放到script.js中:
// script.js // create the module and name it scotchApp var scotchApp = angular.module('scotchApp', []); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; });
接下来让我们把模型和控制器添加到我们的HTML页面中,这样Angular可以知道如何引导我们的应用。为了测试功能有效,我们也会展示一个我们创建的变量$scope.message的值。
<!-- index.html --> <!DOCTYPE html> <!-- define angular app --> <html ng-app="scotchApp"> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <!-- load angular via CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script> <script src="script.js"></script> </head> <!-- define angular controller --> <body ng-controller="mainController"> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> {{ message }} <!-- angular templating --> <!-- this is where content will be injected --> </div>
在main这个div层中,我们现在可以看到我们创建的消息。知道了我们的模型和控制器设置完毕并且Angular可以正常运行,那么我们将要开始使用这一层来展示不同的页面。
将页面注入到主布局中
ng-view 是一个用来包含当前路由(/home, /about, or /contact)的模板的angular指令, 它会获得基于特定路由的文件并将其诸如到主布局中(index.html).
我们将会想div#main中的站点加入ng-view代码来告诉Angular将我们渲染的页面放在哪里.
<!-- index.html --> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> <div ng-view></div> </div> ...
配置路由和视图
由于我们在创建一个单页应用,并且不希望页面刷新,那么我们会用到Angular路由的能力。
让我们看一下我们的Angular文件,并添加到我们的应用中。我们将会在Angular中使用$routeProvider来处理我们的路由。通过这种方式,Angular将会处理所有神奇的请求,通过取得一个新文件并将其注入到我们的布局中。
AngularJS 1.2 和路由
在1.1.6版本之后,ngRoute模型不在包含在Angular当中。你需要通过在文档开头声明该模型来使用它。该教程已经为AngularJS1.2更新:
// script.js // create the module and name it scotchApp // also include ngRoute for all our routing needs var scotchApp = angular.module('scotchApp', ['ngRoute']); // configure our routes scotchApp.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl : 'pages/home.html', controller : 'mainController' }) // route for the about page .when('/about', { templateUrl : 'pages/about.html', controller : 'aboutController' }) // route for the contact page .when('/contact', { templateUrl : 'pages/contact.html', controller : 'contactController' }); }); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; }); scotchApp.controller('aboutController', function($scope) { $scope.message = 'Look! I am an about page.'; }); scotchApp.controller('contactController', function($scope) { $scope.message = 'Contact us! JK. This is just a demo.'; });
现在,我们已经通过$routeProvider定义好了我们的路由。通过配置你会发现,你可以使用指定路由、模板文件甚至是控制器。通过这种方法,我们应用的每一部分都会使用Angular控制器和它自己的视图。
清理URL: angular默认会将一个井号放入URL中。为了避免这种事情,我们需要使用$locationProvider来启用 HTML History API. 它将会移除掉hash并创建出漂亮的URL。我们的主页将会拉取 home.html 文件. About 和 contact 页面将会拉取它们关联的文件. 现在如果我们查看我们的应用,并点击导航,我们的内容将会照我们的意思进行改变.
要完成这个教程,我们只需要定义好将会被注入的页面就行了. 我们也将会让它们每一个都展示来自与他们相关的控制器的消息.
<!-- home.html --> <div class="jumbotron text-center"> <h1 id="Home-Page">Home Page</h1> <p>{{ message }}</p> </div> <!-- about.html --> <div class="jumbotron text-center"> <h1 id="About-Page">About Page</h1> <p>{{ message }}</p> </div> <!-- contact.html --> <div class="jumbotron text-center"> <h1 id="Contact-Page">Contact Page</h1> <p>{{ message }}</p> </div>
本地运行: Angular路由只会在你为其设置的环境后才会起效。你要确保是使用的 http://localhost 或者是某种类型的环境. 否则angular会说跨域请求支持HTTP.
Angular应用的动画
一旦你把所有的路由都完成之后,你就能开始把玩你的站点并向其加入动画了. 为此,你需要使用angular提供的 ngAnimate 模块. 后面你就可以用CSS动画来用动画的方式切换视图了.
单页面App上的SEO
理想情况下,此技术可能会被用在有用户登录后的应用程序中。你当然不会真的想要特定用户私人性质的页面被搜索引擎索引. 例如,你不会想要你的读者账户,Facebook登录的页面或者博客CMS页面被索引到.
如果你确实像针对你的应用进行SEO,那么如何让SEO在使用js构建页面的应用/站点上起效呢? 搜索引擎难于处理这些应用程序因为内容是由浏览器动态构建的,而且对爬虫是不可见的.
让你的应用对SEO友好
使得js单页面应用对SEO友好的技术需要定期做维护. 根据官方的Google 建议, 你需要创建HTML快照. 其如何运作的概述如下:
- 爬虫会发现一个友好的URL(http://scotch.io/seofriendly#key=value)
- 然后爬虫会想服务器请求对应这个URL的内容(用一种特殊的修改过的方式)
- Web服务器会使用一个HTML快照返回内容
- HTML快照会被爬虫处理
- 然后搜索结果会显示原来的URL

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

SublimeText3汉化版
中文版,非常好用

Dreamweaver Mac版
视觉化网页开发工具

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器