Skip to content

Instantly share code, notes, and snippets.

@javaeeeee
javaeeeee / index.html
Created February 6, 2017 19:40
AngularJS nested scopes Controller As syntax
<section ng-controller="ParentController as parent">
<h4>Parent Scope</h4>
<p>{{parent.onlyParent}}</p>
<p>{{parent.myModel}}</p>
<article ng-controller="ChildController as child">
<h5>Child Scope</h5>
<p>{{child.onlyChild}}</p>
<p>{{child.myModel}}</p>
<p>{{parent.onlyParent}}</p>
<p>{{parent.myModel}}</p>
@javaeeeee
javaeeeee / hello.controller.spec.js
Created February 6, 2017 17:17
A test for an AngularJS controller that uses Controller As syntax. The test doesn't rely on AngularJS scope
describe('HelloController tests', function () {
var HelloController;
beforeEach(function () {
module('app');
inject(function ($controller) {
HelloController = $controller('HelloController');
});
@javaeeeee
javaeeeee / hello.controller.spec.js
Last active February 6, 2017 17:13
A test for an AngularJS controller that uses Controller As syntax relying on this syntax
describe('HelloController scope tests', function () {
var scope;
beforeEach(function () {
module('app');
inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
$controller('HelloController as vm', { $scope: scope });
});
@javaeeeee
javaeeeee / hello.controller.js
Created February 6, 2017 16:57
An AngularJS controller using Controller As syntax
(function () {
angular.module('app')
.controller('HelloController', HelloController);
function HelloController() {
var vm = this;
vm.myModel = 'World';
}
@javaeeeee
javaeeeee / index.html
Last active February 6, 2017 16:51
AngularJS Controller As syntax in HTML
<section ng-controller="HelloController as vm">
<h4>AngularJS Greeting</h4>
<label for="name">Type your name here:</label>
<input id=name type="text" ng-model="vm.myModel">
<p>Hello {{vm.myModel}}!</p>
</section>
@javaeeeee
javaeeeee / child.controller.js
Created February 5, 2017 19:29
An AngularJS controller used to explain nested scopes.
(function () {
angular.module('app')
.controller('ChildController', ChildController);
ChildController.$inject = ['$scope'];
function ChildController($scope) {
$scope.myModel = 'Child controller\'s myModel';
$scope.onlyChild = 'Child\'s variable';
@javaeeeee
javaeeeee / parent.controller.js
Created February 5, 2017 19:28
An AngularJS controller used to explain nested scopes.
(function () {
angular.module('app')
.controller('ParentController', ParentController);
ParentController.$inject = ['$scope'];
function ParentController($scope) {
$scope.myModel = 'Parent controller\'s myModel';
$scope.onlyParent = 'Parent\'s variable';
@javaeeeee
javaeeeee / index.html
Created February 5, 2017 19:17
AngularJS nested scopes.
<section ng-controller="ParentController">
<h4>Parent Scope</h4>
<p>{{onlyParent}}</p>
<p>{{myModel}}</p>
<article ng-controller="ChildController">
<h5>Child Scope</h5>
<p>{{onlyChild}}</p>
<p>{{myModel}}</p>
<p>{{onlyParent}}</p>
</article>
@javaeeeee
javaeeeee / index.html
Created February 5, 2017 19:04
Two HTML section each of which has its own controller.
<section ng-controller="HelloController">
<h4>AngularJS Greeting</h4>
<label for="name">Type your name here:</label>
<input id="name" type="text" ng-model="myModel">
<p>Hello {{myModel}}!</p>
</section>
<section ng-controller="GoodbyeController">
<h4>AngularJS Farewell</h4>
<label for="fName">Type your name here:</label>
<input id="fName" type="text" ng-model="myModel">
@javaeeeee
javaeeeee / goodbye.controller.js
Created February 5, 2017 19:01
An AngularJS controller to show that variables with the same name can exist in different scopes.
(function(){
angular.module('app')
.controller('GoodbyeController', GoodbyeController);
GoodbyeController.$inject = ['$scope'];
function GoodbyeController($scope){
$scope.myModel = 'Everyone';
}
})();