Single Page Apps with AngularJS Routing and Templating

*FILE STRUCTURE

- script.js

- index.html

- pages

home.html

about.html

contact.html

*HTML

This is the simple part. We’re using Bootstrap and Font Awesome. Open up your index.html file and we’ll add a simple layout with a navigation bar.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a class="navbar-brand" href="/">Angular Routing Example</a>

</div>

<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>

</div>

</body>

</html>

For linking to pages, we’ll use the #. We don’t want the browser to think we are actually travelling to about.html or contact.html.

*Angular Application

MODULE AND CONTROLLER
We’re going to setup our application. Let’s create the angular module and controller. Check out the docs for more information on each.
First, we have to create our module and controller in javascript. We will do that now in 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!';

});

Let’s add the module and controller to our HTML so that Angular knows how to bootstrap our application. To test that everything is working, we will also show the $scope.message variable that we created.

<!DOCTYPE html>

<head>

</head>

...

</div>

Inside of our main div, we will now see the message that we created. Since we have our module and controller set up and we know that Angular is working properly, we will start working on using this layout to show the different pages.

INJECTING PAGES INTO THE MAIN LAYOUT

ng-view is an Angular directive that will include the template of the current route (/home, /about, or /contact) in the main layout file. In plain words, it takes the file we want based on the route and injects it into our main layout (index.html).We will add the ng-view code to our site in the div#main to tell Angular where to place our rendered pages.

...

</div>

Configure Routes and Views

Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.

Let’s look in our Angular file and add to our application. We will be using $routeProvider in Angular to handle our routing. This way, Angular will handle all of the magic required to go get a new file and inject it into our layout.

// 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.';

});

Now we have defined our routes with $routeProvider. As you can see by the configuration, you can specify the route, the template file to use, and even a controller. This way, each part of our application will use its own view and Angular controller.

Our home page will pull the home.html file. About and contact will pull their respective files. Now if we view our app, and click through the navigation, our content will change just how we wanted.To finish off this tutorial, we just need to define the pages that will be injected. We will also have them each display a message from its respective controller.

-----------------------------------------------------------------------------------------------------------------------

<p>{{ message }}</p>

</div>

------------------------------------------------------------------------------------------------------------------------

<h1>About Page</h1>

<p>{{ message }}</p>

</div>

----------------------------------------------------------------------------------------------------------------------

<h1>Contact Page</h1>

<p>{{ message }}</p>

</div>

---------------------------------------------------------------------------------------------------------------------

10 Reasons That Makes Magento The Dominating eCommerce Platform in 2018

In eCommerce market, for marketers, manufacturers and consumer 2017 was a great year, and it seems to be growing in 2018 as well. Every passing year shows tremendous growth in e-commerce sale that helps to take the business to new levels of success. The world's greatest brands love Magento for its adaptability since the present shoppers and their purchasing designs are changing incrementally. Just Magento — open source and nimble — can enable you to adjust and flourish. With a worldwide biological community of 150,000 engineers and a system of 300+ profoundly prepared arrangement accomplices, Magento helps your online deals while expanding gross edges. Magento organizations offer more at a lower TCO than dealers on aggressive trade stages. Maintaining an e-commerce business isn't a simple undertaking and expects you to put steady endeavors and to strategize to build up a solid web nearness that encourages you to give an upper hand. Wh...

Coder Hub

Search This Blog

AngularJS - Tables