Angular.js is a great tool to create expressive and dynamic HTML. But some of the best parts of Angular doesn’t even come with Angular. ngRoute and ngResource weren’t shipped with Angular, but they are very useful. ngRoute is used for creating routes like localhost:8000/#/yourRouteGoesHere. To use it, you must download from https://code.angularjs.org/1.3.9/ Then, require it with a script tag in your HTML. Note:Only make one index.html page with routes. With ngRoute, the index.html file has to be more of a layout page. Also, do not make one app.js file and put all your Javascript there. Make your app reuseable by writing angular.module("YourAppName",var app = angular.module("YourAppName"); To use routes, you put them in your config and make a Dependency Injection. To do this, in your app.js file, you write this code: angular.module("YourAppName",['ngRoute']).config(function($routeProvider){
//this is where the routes go!
});
You must put ‘ngRoute’ in the array, and $routeProvider in the function params. Otherwise the routes won’t work. Some people like to extract the config function into a routes.js file, as route files can get quite long and you don’t want to plug up your config function. To route, you might write inside the config function:$routeProvider.when('/yourRouteName',{ templateUrl:'../templates/example.html', controller:'yourController', controllerAs:'yourCtrl' });
To explain, the $routeProvider param is calling the when function. The when function is listening for someone to visit ‘#/yourRouteName’. When someone does, it will render your template from the templateUrl with the controller and the alias. With links to your routes, DO NOT forget the pound sign in front of your route.
Leave A Comment