Over the last few weeks I’ve been building my first AngularJs app. My Foray into JS MV* frameworks has been quite a steep learning curve but everything’s now starting to come together. Over the next few weeks I’m going to post what I’ve learnt so far starting with initial setup and routing.
index.html
- css
-styles.css
- js
- app
app.js
controllers.js
directives.js
filters.js
services.js
- templates
- home.html
- articles.htmlThe first thing to do is setup your base page and include Angular JS. I also split directives, controllers, services, filters and the main app.js into separate files – In larger app’s this will make your code much easier to manage.
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/directives.js"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/filters.js"></script>
</body>
</html>The ng-app=”myApp” directive on the HTML tag declares your app’s namespace.
The ng-view directive will render the template of the current route.
Next, you need to open your app.js and define your app:
var myApp = angular.module('myApp', []);We’re going to set up two routes to begin with. One for your index page and one for an articles page.
Create two files within your templates directory call home.html and project.html and add some placeholder text so that we can check the routes are working e.g.
home.html
<section>
<article>
My home content
<article>
<section>articles.html
<section>
<article>
My articles content
</article>
<section>From here we need to setup the routes
Open your app.js file and add the folllowing
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/home.html',
}).
when('/articles', {
templateUrl: 'templates/articles.html',
}).
otherwise({
redirectTo: '/'
});
}]);This basically says that when the url matches / or /articles, load the relevant home or articles template into the ng-view element.
Otherwise() with redirect all other URLs back to the homepage.
The last thing to do is add a couple of links to your index page so you can navigate to these routes
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<nav>
<a href="#/home">Home</a>
<a href="#/articles">Articles</a>
</nav>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/directives.js"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/filters.js"></script>
</body>
</html>And there we have the basis of your AngularJS app with two routes setup.
Download from GitHub