Angular ng-route model with codeigniter framework.

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 .

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.

Codeigniter folder structure

So you are familiar with folder structure, now let’s create userslist.html page under angular_pages.

Now to call this page we need to create AngularFormapp.js file under Angularjs folder.
Let’s check the code below.

READ  How to integrate custom template in codeigniter?

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]

[/wp-like-lock]

READ  How to retrieve data from mysql and display in codeigniter view?

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

  1. Boomi Nathan September 28, 2015
  2. Yasir April 20, 2016
  3. admin April 27, 2016
  4. KevinOTatton June 14, 2016
  5. ElbertXTello July 13, 2016
  6. ToneyHOdiase August 16, 2016
  7. GarretZTvedt August 19, 2016
  8. ShonFBrockus September 8, 2016

Leave a Reply