{"id":16431275,"url":"https://github.com/rubencodeforges/angularcourse","last_synced_at":"2026-03-01T16:03:51.394Z","repository":{"id":84352894,"uuid":"52168648","full_name":"rubenCodeforges/AngularCourse","owner":"rubenCodeforges","description":"AngularJs for Beginners a Full course","archived":false,"fork":false,"pushed_at":"2016-05-12T14:10:11.000Z","size":3459,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-25T09:47:21.362Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rubenCodeforges.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-20T18:30:22.000Z","updated_at":"2019-07-12T14:37:03.000Z","dependencies_parsed_at":"2023-03-04T10:00:15.618Z","dependency_job_id":null,"html_url":"https://github.com/rubenCodeforges/AngularCourse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rubenCodeforges/AngularCourse","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2FAngularCourse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2FAngularCourse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2FAngularCourse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2FAngularCourse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubenCodeforges","download_url":"https://codeload.github.com/rubenCodeforges/AngularCourse/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2FAngularCourse/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29974327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T15:41:30.362Z","status":"ssl_error","status_checked_at":"2026-03-01T15:37:07.343Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T08:29:39.081Z","updated_at":"2026-03-01T16:03:51.375Z","avatar_url":"https://github.com/rubenCodeforges.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![enter image description here](https://angularjs.org/img/AngularJS-large.png)\n# Angular for Beginners\nThis course will be focused on developers with basic knowledge of javascript .\nAlso in order to view documentaion for each chapter, just go to the corresponding folder.\n\nWe will cover the following topics :\n\n### Introduction\nI dont want to spent to much time telling why Angular .\nIts simple ,  currently the market has a demand on Angular devs and we want to earn money.\nWhat im going to tell you is that at the end of this course we will build a Blog application that will have following features:\n\n- Dashboard Authentication\n- Posts CRUD ( with corresponding pages )\n- Posts Index and Show page ( Frontpages )\n\n### [1. Basic Setup for Angular](chapter1/README.MD)\nIn this chapter you will learn about `npm` and `bower`.\nThis tools are required for fast installation of Angular and other modules you may need in development.\nWe also will install `nodeJs` as it is required in order to work with `npm`\n\n### [2. First steps , \"Hello World\" , Basic DataBinding](chapter2/README.MD)\nIn this chapter we will create a simple \"Hello World\" app.\nIn this app you will learn about basic data binding.\nSmall introduction to `directives` we will use the `ng-repeat` and `ng-click` directives\n\n\u003e ####Home work:\n\u003e  - Create basic project\n\u003e  - Setup a form with following field ( name , age , gender ) and a button\n\u003e  - On button click get data from the form and push it to a array\n\u003e  - Create a container with class `.peoples`  in that container iterate through the `peoples` data array\n\u003e  and output in a unordered list the data in the following format:\n\u003e   ```\u003cli\u003e Name: ***** , Age: ******, Gender: ***** \u003c/li\u003e```\n\n### [3. Modules , Basic Controllers , Basic $scope](chapter3/README.MD)\nIn this chapter you will learn the modular concept and the MVW concept of Angular.\nWe will create a controller for the main view and use `$scope`  to bind data to the view and controller.\n\n\u003e #### Home work:\n\u003e - Take the example template from part3 and add the same functionality as in previous homework ( part2 ) but this time move the whole logic in to a controller.\n\u003e - Add a toaster module and use it to notify the user if he add successfuly data to the table.\n\u003e - Make a validation for all fields ( just required or not empty ) in case the form was not valid make a error toaster.\n\u003e - Create a delete method that will delete a entry on click, use the button from the template i gave `.glyphicon-remove`\n\u003e - You should have a main app.js file for just the init and injection and a separate controller file.\n\u003e\n\u003e This homework i would like to see in a git repo , but you can send zips , but i like git. dont send fiddls\n\n### [4. $http, short introduction in to promise](chapter4/)\nThe most important part for a SPA is communication with the server and in this chapter we will learn how to use the core `$http` service.\nWe will get real data from a server and use it to output it on our view.\n\n\u003e #### Home work:\n\u003e Use template provided in the [chapter4](chapter4/)\n\u003e - Modify  previous home work:\n\u003e - On first load get data from server using this route `http://angular.codeforges.com` and populate the `users` data array\n\u003e - On form submit , send data to the server , using this route `http://angular.codeforges.com`\n\u003e - on success populate the `users` data array with the newly created person\n\u003e You can read the following documentation [angular $http](https://docs.angularjs.org/api/ng/service/$http)\n\n### [5. Routing \u0026  Resource Factory](chapter5-6/)\nIn this chapter we will learn about routing and how a basic SPA structure should look like.\nHow to bind a controller and a view to a specific route.\nUnderstanding what Show, Index , Edit pages are.\n\nHere we will talk about resource factory , which is the best way for mapping and controlling data.\nWe will build our resource model and bind it to a corresponding api endpoint\n\n\u003e #### Home work:\n\u003e - Create a Post ( Index , Show ) page routes with the corresponding controller and view\n\u003e - Create a resource Post with the endpoint provided\n\u003e - Using the Post resource update the Post Index and Show page , Create a call to the API with the Post resource and populate each page with corresponding data.\n\n### [6. Authentication | Basic Auth](chapter6/)\nThe authentication is a part of many applications , in this chapter we will learn the basics of that process.\nWe will send login and password to our api and in case of success we will store some data in Service in order to stay loged in\n\n\u003e #### Home work:\n\u003e Some explanation: Due to the fact that the outofthebox wp-rest-api lacks on some login ednpoints , we will have to do a call to list users find the required get its id and make a request to retrive that user. So here is the homework:\n\u003e - We will have 2 pages , home with route `/` this will be the default one, then login with route `/login`\n\u003e - You need to store a current user context , the best way for that is to use a service. While we didnt covered them i give you an example:\n\n```javaScript\napp.factory( 'AuthService', function() {\n  var currentUser;\n\n  return {\n    login: function() { ... },\n    logout: function() { ... },\n    isLoggedIn: function() { ... },\n    currentUser: function() { return currentUser; }\n    ...\n  };\n});\n```\n\u003e - So whenever we try to enter the home page `/` we have to check if the user is logged in if not redirect to login `/login`\n\u003e - On login page create a login form , `login`(on endpoint its name) , `password`.\n\u003e - While entering the login page , we also can fetch all users ( this is required to find the id of our user that will be logged in ) so the endpoint for getting users list is `/wp/v2/users`  and full url would be `angular.codeforges.com/api/wp-json/wp/v2/users`\n\u003e - On loginForm submit , first you need to find the id of the users , use the array of users you retrived earlier and find the required user by email and get the id.\n\u003e - Next you have to recive this user using this endpoint `/wp/v2/users/\u003cid\u003e`\n\u003e - On success , store the userData in the service you created earlier. And redirect on home page\n\u003e - On home page create a user status bar when logged in , display data  and make a logout button , the logout should destroy the user in service and you should be redirected from home to login\n\n\u003e !!! The Best solution will be used as boilerplate for futher chapters.!!!\n\n\n### 7.Dashboard or secured Area ???\n\nIn a modern application you will have a dashboard area where you can admin several things such as a Post creation , delete and update.\nThis behavior we will also implement in this chapter.\nFirst we will create secure routes which requires the user to be authenticated , otherwise the router will send the user to a login form.\nIf authentication is successful the user is send to a dashboard.\n\n\u003e#### Home work\n\u003eYou can use for authentication a [example](https://github.com/migalenkom/angular_app/tree/master/Hometask%235) made by one \u003emember from our course \n\u003eFor the dashboard we will use a bootstrap [template] (http://blackrockdigital.github.io/startbootstrap-sb-admin/index.html)\n\u003eYou dont need to have all the peaces , in fact we need just one side menu item ( Pages ) with following sub items New Page , Page list.\n\u003eSo the menu structure: \n\n```\nPages-\n  New post\n  All posts\n```\n\u003eFor post listing you can use bootstrap tables.\n\u003eFor new post following fields are required:\n```\nTitle( api key : title )\nContent( api key : content)\npost status ( dropdown , api key: status , should be default to 'publish')\n```\n\u003eFor more description of api fields refer to the [api doc](http://v2.wp-api.org/reference/posts/)\n\u003eplease read through the doc to find the required endpoints.\n\u003eWe need to create a post , to update(edit) a post and fetch a post list.\n\u003e\n\u003eThe post edit form is same as form for create but is field with data on load, the data is fetched from api.\n\u003eIn order to enter a post edit screen we need to have a button on post listing for each post.\n\u003e\n\u003e##### !Security!\n\u003ePlease take in to account that for create , update you need to check for credentials ( Basic Auth ).\n\u003eAlso while you using a example for the authentication , you should extend it a bit and check if the user is authorized to \u003eenter a dashboar page ( is loged in )\n\n### 8. Cleaning up the application\nThis chapter is a conclusion of our little course , based on you work we will discuss some best practices in terms of structure and\nI will introduce some useful tools , like yeoman and will give a interesting home work.\n\n\u003e #### Home work\n\u003e - hidden\n\n### 9. Directives\nI know it should be at top , but from my experience i see that directives are hard to understand for most developers that why it comes as a last chapter.\nSo far we have a fully functional application , now we will polish it with directive abstracting , decoupling and making the app modular.\nThis chapter will take double the time as previous chapters so be prepared :)\n\u003e #### Home work:\n\u003e  - Polish up the app with directives using the recommendation and information i gave\n\n### Conclusion\nFrom that point you will be able to work with angular and build you own apps.\nI will tell a bit about `coffee script` and template engines like `jade` give some additional documentation to read. And perhaps start to work on advanced course.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubencodeforges%2Fangularcourse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubencodeforges%2Fangularcourse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubencodeforges%2Fangularcourse/lists"}