{"id":15906286,"url":"https://github.com/softchris/angulartemplate","last_synced_at":"2025-10-06T18:56:44.739Z","repository":{"id":10686334,"uuid":"12926333","full_name":"softchris/angulartemplate","owner":"softchris","description":"a starting template for angular, everything in place services repo etc..","archived":false,"fork":false,"pushed_at":"2015-08-06T14:46:34.000Z","size":704,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T22:43:30.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/softchris.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}},"created_at":"2013-09-18T15:08:22.000Z","updated_at":"2019-06-27T06:26:06.000Z","dependencies_parsed_at":"2022-09-08T06:20:58.883Z","dependency_job_id":null,"html_url":"https://github.com/softchris/angulartemplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/softchris/angulartemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softchris%2Fangulartemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softchris%2Fangulartemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softchris%2Fangulartemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softchris%2Fangulartemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softchris","download_url":"https://codeload.github.com/softchris/angulartemplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softchris%2Fangulartemplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278663384,"owners_count":26024389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-06T13:22:13.828Z","updated_at":"2025-10-06T18:56:44.710Z","avatar_url":"https://github.com/softchris.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Up and running\n================\nEasiest way to get up and running is to get python and then in a terminal write the following\n\n\tpython (python ver 3) -m http.server\nor\n\n\tpython (python ver 2) -m SimpleHTTPServer \n    for older versions of python\n\nWhat do you get?\n================\nThe solution consists of a fully functional angular application\nThe main idea is to provide a light intro to must things angular just to get you started.\n\nControllers\n-----------\nA controller needs a name, its usually dependant on one or more services / factories, and it always needs a scope\n\t\n\tvar controllers = angular.module('controllers'); // getting the correct module\n\tcontrollers.controller('LoginController',['$scope','userService',    // list the services that you want to inject aka use\n    function($scope,userService){\n        //mock implementation\n        $scope.user = \"\";\n        $scope.password = \"\";\n        $scope.login = function(){\n            userService.login($scope.user,$scope.password);\n        }\n    }\n\t]);\n\nRoutes\n-----------\nExample - adding a route:\nFor example you want to be able to go to a login page by typing /Login\n\n\t$routeProvider.when('/Login', { templateUrl: 'html/login.html', controller: 'LoginController' });\n\n###Making it work\n\n\t1) Create the view  \n\thtml/login.html.\n\t2) Create the controller\n\tStarting out its fine to have controllers, services etc in the same file. As it grows you need to think\n\tof separating the files so you can do one of two things \n\t\n\t2.1) add controller defintion to controllers.js\n\t2.2) create your own controller file\n### Add script reference to entry point file \nusually index.html (where ng-app is)\n\n\nBackend\n-----------\n* $http and $resource, how to get data from a REST service - coming\nServices\n----------\n* Service creation - coming\nDirectives\n----------\n* Directive creation - coming\nForm validation\n----------\n* Form validation - coming\n\nTDD - how to work better \n---------- \nIn able to work with TDD you need a way to write tests and also run the tests. Karma lets you do just that.\nThis is a very good page that explains how it works but I have tried to simplify it\n\n\thttp://karma-runner.github.io/0.10/index.html\n### Installing Karma\nThere are two ways to do it. One is a global install which installs the files in your system\n\n\tnpm install -g karma , global installation\nThe other way is to install all the files just for your current project. This installs all the files in a node_modules directory in yur project. So for example lets say your project is in c:\\app. Typing 'npm install karma' would create c:\\app\\node_modules \n\n\tnpm install karma --save-dev  \n\n### Configuring it\n\nRun a guide that creates your config file (needed later for startup of karma)\n\n\tkarma init myconfig.js\nThis will start a guide that will let you specify where the app files are, what browsers to run tests in etc\n### Breakdown of config file\nBy now you have a config file but what to specify?\n\n    \"files: [\n\n    ],\" , \nhere you should list where controllers, repos, services and angular files resides\nexample :\n\n    files : [\n            'lib/angular/angular.js',\n            'lib/angular/angular-loader.js',\n            'lib/angular/angular-resource.js',\n            'lib/angular/angular-mocks.js',\n            'app.js',\n            'controllers.js',\n            'services.js',\n            'models.js',\n            'repositories.js',\n            'test/**/*.js'\n        ],\n\n\n\tautoWatch : true , this means that any change in the file will rerun the tests\n\n###Your first test\nThis is placed in a file under test/** (so it matches the files)  for example\n \n\ttest/services/loginService.js\n\n#### Description\n\nfirst thing is to create the test under the test directory and start to describe it like so\n\n    describe('testing stuff',function(){\n\n    });\n\n#### The test\nWithin the 'describe' you define the test and also define an expect condition, compare it to Assert...\n\n    it('name of test',function(){\n        expect(2).toBe(3); // false, this will fail\n    });\n\n\n#### Putting it altogether\n\n    describe('testing stuff',function(){\n       it('name of test',function(){\n           expect(2).toBe(3); // false, this will fail\n       });\n    });\n\n\n#### Running it\n\n\tkarma start myconfig.js\nIf you wrote everything correct you should have a failing test\n\n###Testing a service in your app\n\n#### Preload needed modules\n\n    beforeEach(module('services'));\n    beforeEach(module('models'));\n\nWhy both these modules, well the services is needed to find the definition of the service we wish to test\nthe models is needed because the service has a dependency to a model\n#### Inject, aka fetch the needed service from angular\n\n    beforeEach(inject(function(_loginService_){\n            loginService = _loginService_;\n        }));\n\nThis is a shorthand form its also possible to write a longer version\n\n    beforeEach(inject(function($injector){\n            loginService = $injector.get('loginService');\n    }));\n\n#### Putting it altogether\n\n    describe('testing stuff',function(){\n        beforeEach(module('services'));\n        beforeEach(module('models'));\n\n        var loginService = null;\n\n        beforeEach(inject(function(_loginService_){\n            loginService = _loginService_;\n        }));\n\n        it('noone logged in yet',function(){\n\n            expect(loginService.isLoggedIn()).toBe(false); // true, a user should not be logged in at start of site\n        });\n    });\n\n### Mocking\nAt some point, for example when talking to a backend, you want a mock to answer instead of the real thing.\nA way to do this is to use something called $provide, this badboy can overwrite things defined in anglar $http or\nany of your own services / factories etc..\n#### Define the mock in beforeEach\n\n    beforeEach(module(function ($provide) {\n            // mock away userService\n            mockUserService = { getUser : function(){\n                return mockUser;\n            } };\n            $provide.value('userService', mockUserService); // overwriting the actual definition of userService\n    }));\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftchris%2Fangulartemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftchris%2Fangulartemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftchris%2Fangulartemplate/lists"}