In the previous articles we had discussed about angular form submission using codeigniter and Fetching data using Angularjs. You can read previous articles by clicking below links.
Now let’s move to the topic, here I am going to use ng-route model in our project, before using ng-route please include below scripts to your html header .
1 2 | <script src="<?php echo base_url();?>scripts/angular.min.js"></script> <script src="<?php echo base_url();?>scripts/angular-route.min.js"></script> |
So we had added scripts what’s next? Let’s see the folder structure of codeigniter, here I had added two new folders to root folders, they are angular_pages and Angularjs.
So you are familiar with folder structure, now let’s create userslist.html page under angular_pages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div ng-controller="usersController"> <table class="table table-bordered table-hover"> <thead class="table-color"> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>City</th> <th>Phone Number</th> <th>Address</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr ng-repeat="item in registrations"> <td>{{item.firstname}}</td> <td>{{item.lastname}}</td> <td>{{item.emailid}}</td> <td>{{item.City}}</td> <td>{{item.phone}}</td> <td>{{item.address}}</td> <td><a href="#/edit/{{item.user_id}}"><span class="glyphicon glyphicon-pencil"></span></a></td> <td><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> </div> |
Now to call this page we need to create AngularFormapp.js file under Angularjs folder.
Let’s check the code below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | var welcome = angular.module('welcome', ['ngRoute']); welcome.config(function ($routeProvider) { $routeProvider .when("/angulardemo", { templateUrl:'angular_pages/form.html', controller: "regController" }).when("/login", { templateUrl:'angular_pages/login.html', controller: "loginController" }).when("/users", { templateUrl:'angular_pages/userslist.html', controller: "usersController" }).when("/edit/:user_id", { templateUrl:'angular_pages/edit_form.html', controller:"editRegistration" }) .otherwise({ redirectTo: "/angulardemo" }); }); welcome.controller('usersController',['$scope','$http', function ($scope,$http) { $http({ method:'post', url:'http://localhost:81/Codeigniter/index.php/welcome/fetchdata', //data : $scope.user, //forms user object headers : {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function (data) { $scope.registrations=data; }); }]); |
Now we need to create angular module to create controllers, here I created welcome as angular module. Now we need to configure the routeprovider, before that we need to pass ngRoute into angular module to call the service.
In the above code using ( .when) to route the template url and controller function in angular module.
Now let’s create index.php file, which will be created under codeigniter views folder or else in project root folder as below.
[wp-like-lock]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html lang="en" ng-app="welcome"> <head> <meta charset="UTF-8"> <title>Example of Bootstrap 3 Horizontal Form Layout</title> <link rel="stylesheet" href="<?php echo base_url();?>/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo base_url();?>/css/bootstrap-theme.min.css"> <script src="<?php echo base_url();?>scripts/jquery-2.0.0.min.js"></script> <script src="<?php echo base_url();?>scripts/bootstrap.min.js"></script> <script src="<?php echo base_url();?>scripts/angular.min.js"></script> <script src="<?php echo base_url();?>scripts/angular-route.min.js"></script> <script src="<?php echo base_url();?>angularjs/AngularFormApp.js"></script> </head> <body > <div id="section-container" > <p>This is some text</p> <div ng-controller="usersController"> <ul> <li><?php print anchor('#/angulardemo','home'); ?></li> <li><?php print anchor('#/login','Login'); ?></li> </ul> <div ng-view> </div> </div> </div> </body> </html> |
[/wp-like-lock]
Here we need to add angular module name to html tag, then we need to add controller function using ng-controller to body tag or else to div tag.
Now we need to display our userslist.html in our main index template, for this we need to use ngView is a directive that uses the $route service by including the rendered template of the current route into the main layout (index.php) file. When user clicks on new link the current route will change and new view will be loaded to ngView, according to the configuration of the $route service.
Thanks for reading this article.
8 Comments
Nice tutorial blog keep it up !
Nice explanation but I have some questions;
1. Is it risk free to make the directory, for angular partial templates, at the application directory’s level?
2. I followed the above instructions and angular successfully merged with codeigniter but the problem is upon refreshing a page it leads to 404. I added the locationProvider dependency as well and set html5Mode to true and added the just after the title tag.
I shall be grateful for having my these queries resolved.
Thanks
Thanks Yasir,
1. We can create angular directories with in application level, its risk free.
2.Please check your config settings of your app whether you are adding right routeProvider path or not.
We are a small group of volunteers and opening a
new scheme in your community. Your website provided us with valuable
info to be effective on. You’ve done an amazing job and our entire
community is going to be thankful for you.
Incredible points. Solid arguments. Continue the amazing work.
Hello, this weekend is pleasant in support of me, for the reason that this occasion i am reading this fantastic educational post here at my home.
I like the things you guys are generally up too.
Such clever work and coverage! Maintain the excellent works guys I’ve incorporated you guys to my personal
blogroll.
Very quickly this website will likely be famous amid all blog visitors, as a result of it’s good posts