This article mainly introduces the use of Angularjs to create a single page application programming guidelines, ANGULARJS is a highly popular JavaScript library, the need for friends can refer to the
Overview
Single-page applications are becoming increasingly popular. Web sites that simulate the behavior of a single page application can provide a sense of mobile/tablet applications. Angular can help us create this kind of application easily
Simple Application
We intend to create a simple application involving the homepage, about and contacting our page. Although angular is created to create more complex applications than this, this tutorial shows many of the concepts we need in large projects.
Goal
Single page Application
No Refresh page Changes
Each page contains different data
While JavaScript and Ajax can be used to achieve these functions, in our applications, angular can make it easier for us to handle.
Document structure
-Script.js
-Index.html
-pages
-----home.html
-----about.html
-----contact.html
HTML page
This part is relatively simple. We use bootstrap and font Awesome. Open your index.html file, and then we use the navigation bar to add a simple layout.
<!-- 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 -->
<!--thisis 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>
In the page hyperlink, we use "#". We do not want browsers to think that we are actually linking to about.html and contact.html.
Angular application
Models and controllers
At this point we are ready to set our application. Let's start by creating angular models and controllers. Consult your documentation for more information about models and controllers.
First, we need to use JavaScript to create our models and controllers, and we'll put this into script.js:
// script.js
// create the module and name it scotchApp
varscotchApp = 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!';
});
Next, let's add the model and the controller to our HTML page so that angular can know how to guide our application. In order to test the function effectively, we will also show a value of the variable $scope.message we created.
<!-- 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 -->
<!--thisis where content will be injected -->
</div>
In the main div layer, we can now see the message we created. Knowing that our model and controller are set up and Angular is working properly, then we will start to use this layer to display different pages.
Inject the page into the main layout
ng-view is an angular directive that contains a template for the current route (/ home, / about, or /contact).It will get a file based on a specific route and put it into the main layout (index.html).
We will want to add the ng-view code to the site in div # main to tell Angular where to put our rendered page.
<!-- index.html -->
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
...
Configuring Routes and views
Because we are creating a single page application and do not want the page to refresh, we will use the ability to angular routing.
Let's take a look at our angular file and add it to our application. We will use $routeprovider in angular to process our route. In this way, angular will handle all the magical requests by getting a new file and injecting it into our layout.
ANGULARJS 1.2 and routing
After the 1.1.6 version, the Ngroute model is not included in the angular. You need to use it by declaring the model at the beginning of the document. This tutorial has been updated for AngularJS1.2:
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
varscotchApp = 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.';
});
Now, we have defined our route through $routeprovider. By configuration you will find that you can use the specified route, template file, or even controller. In this way, each part of our application uses the angular controller and its own view.
Cleaning Url:angular The default will put a well number into the URL. To avoid this, we need to use $locationprovider to enable the HTML History API. It will remove the hash and create a nice URL. Our homepage will pull the home.html file. The About and contact pages will pull the files associated with them. Now if we look at our apps and click on the navigation, our content will change as we see it.
To complete this tutorial, we just need to define the pages that will be injected. We will also have each of them show messages from the controller associated with them.
<!-- home.html -->
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
<!-- about.html -->
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
<!-- contact.html -->
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
enter" >
Run locally: Angular routing only works when you set up an environment for it. You want to make sure that you are using a http://localhost or a certain type of environment. Otherwise angular will say Cross-domain requests support HTTP.
Animations applied by angular
Once you've completed all the routes, you can start playing with your site and adding animation to it. To do this, you need to use the Nganimate module provided by angular. You can use CSS animations to toggle the view in the back of your animation.
SEO on a single page app
Ideally, this technique may be used in applications that have a user logged in. Of course you don't really want a specific user the private page is indexed by the search engine. For example, you will not want your reader account, Facebook login page or blog CMS page is indexed.
If you really like the SEO for your application, then how to let the SEO in the use of JS Construction page application/site on the effect? Search engines have difficulty processing these applications because the content is dynamically built by browsers and is not visible to reptiles.
Let your application be friendly to SEO
Make JS single page application of SEO-friendly technology need to do regular maintenance. According to the official Google advice, you need to create an HTML snapshot. An overview of how it works is as follows:
The crawler will find a friendly URL (http://scotch.io/seofriendly#key=value)
Then the crawler will want the server to request the content of the URL (in a special modified way)
The Web server uses an HTML snapshot to return content
The HTML snapshot was processed by the crawler
The search results will then display the original URL
For more information on this process, check out Google's Ajax crawler and their guide to creating HTML snapshots.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
