Angularjs and Url routing and adding a controller for beginners
Intro
Just started working with Angularjs.This is the basis of adding a new controller and wiring it into angularjs.
Awesome tutorial from angularjs. AngularJS tutorial
Summary:
tl;dr- add a when to the app.js. under the $routeProvider.
- create the controller-weva.js file and name the controller the same as the when block.
- create the weva-view.html same name as in the when block to receive the controller call.
- add the controller-weva.js script named in the when block to the index.html
- visit the url from the when block. May have to restart.
Routing file - /app/js/app.js
The routing of Angularjs is done in the /app/js/app.js file.App.js from the tutorial project
Here is the contents:
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
phonecat matches the angular-app from the index.html file.
PhoneListCtrl is the name of the controller to use for this request.
/phones the url mapping that will map to the PhoneListCtrl.
partials/phone-list.html is the location of the html file to receive the angularjs call after the controller. The folder name is not required to be named partial. Maps to /app/partials/phone-list.html.
phone-list.html from tutorial
Header file: /app/index.html
Index is the starting point for your angularjs project.The module 'phonecat' from the app.js matches the index ng-app tag in index.html of the project.
<html lang="en" ng-app="phonecat">
index.html from the Angularjs tutorial
The controllers are added via adding a script like following snippet.
<script src="js/controller.js"></script>
Controller "example" file: /app/js/controllers.js
controllers.js from the tutorial projectSnippet of the controllers.js:
function PhoneListCtrl($scope, Phone) {}
The tutorial has 2 controllers in it but you can have separate files which makes it easier to source control.
No comments:
Post a Comment