Skip to content

Instantly share code, notes, and snippets.

@EdricChan03

EdricChan03/app.js

Last active January 13, 2017 11:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EdricChan03/81426228d22314c23c5e8ec1d57deac1 to your computer and use it in GitHub Desktop.
Save EdricChan03/81426228d22314c23c5e8ec1d57deac1 to your computer and use it in GitHub Desktop.
Download ZIP
Angular - Getting Started
Raw
app.js
// angular.module('BlankApp', ['dependency1', 'app.directive'])
/**
*
* Note that you can import controllers too!
* Example:
* angular.module('dependencies', []).
* controller(
* ...
* )
* angular.module('TestApp', ['dependencies', 'ngMessages', ...]).
* controller(
* ...
* )
*
*/
var app = angular.module('SampleApp', []);
// .controller('SampleController', function($scope, $search) {
// $scope.sampleContent = 'Lorem ipsum...';
// this.testContent = $search.testContent;
// })
app.controller('SampleController', function($scope, $log) {
$log.debug('Loaded!');
var sample = 'Wow';
$scope.test = function() {
return 10;
};
});
// .directive('sampleContent', function() {
// restrict: 'E',
// templateUrl: 'samplecontent.html',
// transclude: true,
// controller: function () {
// return 203203;
// }
// })
app.directive('sampleContent', function() {
// Restricts to element. Accepted values:
// 'A': attribute
// 'E': element
// 'C': class
// 'M': comment
//
// Note that you can combine the letters too!
restrict: 'E',
// Template URL
templateUrl: '/template/samplecontent.html',
// Controller - Can also be function
// Example:
// app.directive('wowTest', function() {
// restrict: 'E',
// templateUrl: '/path/to/wowtest.html',
// controller: WowController
//
// function WowController($scope, $wow) {
// $wow.content = $scope.content;
// $scope.functionTest = function() {
// console.log('You triggered me!');
// return 100;
// };
// };
// })
controller: function() {
return 1010;
}
});
Raw
index.html
<html ng-app="SampleApp">
<head>
<!--Angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<!--
Original AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
-->
<!--App.js-->
<script src="app.js"></script>
</head>
<body>
<div ng-controller="SampleController">
<button ng-click="test()">Click me</button>
<!--Custom HTML Element defined in app.js-->
<sample-content></sample-content>
</div>
</body>
</html>
Raw
samplecontent.html
<h1>Hello, World!</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment