Upon studying AngularJS, I decided to make a simple system to apply what I learned. It is a contact list system where there is a json database to be pulled out by angular-repeat and put it in the view. This is a simple application how angularjs manages the data to the from the controllers to the view. Please ignore my stupid design. :)
 |
| Project Directory and Files |
This is a pure client side so you don't need a server here. This is not a tutorial but I'll explain some important codes. You can view the actual code and interface in this
LINK .
As you see the directory, I separated the json file and the scripts. At first I created it all in in index so that I don't have a hard time loolking on separate files since I know the code will not take too long then after that I just separate it.
I used bootstrap to design the interface. It is a good css framework. I encourage you to study it. It's responsive design and easy to use classes is really user friendly.
 |
| Head |
In the head get all the things that you need. I prefer to link all my css and javascript library online and not in its local dir for this one, but somehow you'll need to do it offline for your projects.
always get the jquery.min.js before the bootstrap library because it is needed by the bootstrap. You might experience error for some animation of js in your bootstrap design if you don't put jquery first.
as you see, the pattern is jquery, bootstrap, angularjs.
If you look at the body tag, I added the ng-app="myApp" to declare that the whole body is an angularjs application so that all the angularjs expression will work in any place inside the body. You can see also ng-init and some values. They values for what should be the initial image and name you should see first when you start your application or page.
<a href="#" class="list-group-item" ng-repeat="person in People | filter:txtsearchmodel" ng-click="selectContact(person,$index)">
<span class="glyphicon glyphicon-user"></span> <strong>{{$index + 1}}.)</strong> {{person.name}}
</a>
This is the code for the left side bar. It simply get the value of the json file and loop it like a foreach using the ng-repeat
 |
| Content |
There are also other code including for the click event when you select the name in the side bare, that includes the ng-click and trigger a controller and show the the view above. But since this is not a tutrial and I already gave you the code in plunker, I will not elaborate it more. Just contact me for more question. :)
Angular is really a powerfull tool, a too long code that I usually do in plane javascript is really a short one in in angularjs.
later on I am planning to study other client side framework including react.js and vue.js. A lot of people are tealling that vue.js is really good and a combination of angularjs and react.js . When I have time to study it, let's collaborate and study it :)
