I am writing a web app using AngularJS. It is not a single page application but all my codes are in one file- index.ejs.
So my set up for index.ejs roughly looks like this:
<head>
<title> Main page </title>
</head>
<body>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
</div>
<script type = "text/ng-template" id = "/main.html">
.....
</script>
<script type = "text/ng-template" id = "/addStuff.html">
.....
</script>
<script type = "text/ng-template" id = "/searchStuff.html">
.....
</script>
<script type = "text/ng-template" id = "/about.html">
.....
</script>
</body>
I have a title for the main page on top of index.ejs. I would also like to have seperate titles for each page so when they are opened in a new tab, I know which one is which. I have tried doing:
<script type = "text/ng-template" id = "/addStuff.html">
<head>
<title> Add Stuff </title>
</head>
.....
But this doesn't work. Any ideas? Thanks.
You should use ui-router. In which case you can add a top level controller on the body or html element, for example <html ng-app="my-app" ng-controller="AppCtrl">
And add a '$stateChangeSuccess' listener whenever a new route is loaded...
.controller('AppCtrl', function AppCtrl($scope) {
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (angular.isDefined(toState.data.pageTitle)) {
$scope.pageTitle = toState.data.pageTitle;
}
});
})
Then in the route definition you can add a property called data.pageTitle
$stateProvider.state( 'profile', {
url: '/profile',
views: {
"main": {
controller: 'ProfileCtrl',
templateUrl: 'profile/profile.tpl.html'
}
},
data:{
pageTitle: 'Profile'
}
})
Then in your main index.html file, you can bind the pageTitle attribute:
<title ng-bind="pageTitle"></title>
The most important part is the you move the directive ng-app on the <html> tag if it's not already in there.
Thus all the html page is covered by angular.
Eg:
<html ng-app="app">
...
</html>
Then it's really your choice.
You can use a custom directive to wrap the title, generate a service or just use the {{ }} syntax.
Related
I am unsure why the input is not updating the name variable as undefined is always displayed
Here is my html code
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="refscript.jsx" type="text/jsx"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
And this is my jsx file named refscript.jsx
var RefComponent = React.createClass({
display: function(){
var name = this.inputdemo.value;
document.getElementById('dispName').innerHTML = name;
},
render:function(){
return(
<div>
<h2>Name: <input type="text" ref ={input => this.inputdemo = input}/></h2><br/>
<button onClick={this.display}>Click</button>
<h1>Hi...<span id='dispName'></span></h1>
</div>
);
}
});
React.render(
<RefComponent/>, document.getElementById('content')
)
I would like to add forms to a page in real time, but I'm not sure how to approach this.
Let's say that this is the class of my form:
class MyForm(FlaskForm):
my_field = StringField()
This is the html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="addNewForm">Add new form</button>
</body>
</html>
Which also includes this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">/script>
<script type="text/javascript">
var form = '{{ form }}'
$("document").ready(function () {
$("#addNewForm").click(function () {
$("body").append(form)
});
});
</script>
Once I press the button I get back something like:
<forms.MyForm object at 0x000001C198CE5040>
I tried to extract the form HTML in order to pass it as an a string of html, but I can't find a way to do it (and suspect that there must be a better way).
What is the correct way of doing this?
I am trying to make a webpage.In that when a user login , a new html page("dashboard.html")opens in the view. This "dashboard.html" contains some links(links to other html pages).When user clicks on them a new html(say "page_3.html") page should open with data that is present in controller.this "page_3.html" is not fetching data from controller.Below is my code.
<!-- controller.js -->
var app = angular.module('myApp',[ 'ngRoute' ]);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'login.html'
})
.when('/dashboard',{
templateUrl: 'dashboard.html'
})
.when('/page_3',{
templateUrl: 'page_3.html'
})
.otherwise({
redirectTo : '/'
});
});
app.controller('app', function($scope, $location){
$scope.item = "test";
$scope.submit = function(){
$location.path('/dashboard');
}
};
});
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app= "myApp" ng-controller="app">
<div ng-view></div>
</body>
</html>
<!-- below is login.html page -->
<div ng-controller="app">
<form action="/">
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
<!-- below is my dashboard.html page -->
<div ng-controller="app">
<h1>Page_3</h1>
<div><a href='page_3.html'>page_3</a></div>
</div>
<!-- below is page_3.html page -->
<div ng-controller="app">
<p>{{item}}</p>
</div>
result : {{item}}
May I suggest avoiding the ng-controller directive and rather use the controller config object on your router?
.when('/page_3',{
templateUrl: 'page_3.html',
controller: "app"
})
There are two main problems with your code:
Enable HTML 5 mode for pushState via $locationProvider for URLs like /dashboard and /page_3
Fix the problem where route is configured for /page_3 but having a a tag pointed to /page_3.html
To get a working example:
Add a base tag
<base href="/">
Enable html5 mode via locationProvider in a config block
$locationProvider.html5Mode(true);
Fix route in dashboard.html
<!-- below is dashboard.html page -->
<div ng-controller="app">
<h1>Page_3</h1>
<div><a href='page_3.html'>page_3</a></div>
</div>
Click here for the demo / jsbin.
Other/suggestions: as Zack Briggs have suggested; using controller syntax in routes would help you come up with better code structure / design in router config, directives, or components. Also putting everything in one place is often a bad idea for a growing project.
I am working on a angular directive POC. Here I have an HTML page and a controller class. I have method in my typescript class that returns a directive. Also I have a placeholder for this directive in the HTML page. How can I link these two.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="scripts/angular.js"></script>
<script data-main="main" src="scripts/require.js" type="text/javascript"></script>
</head>
<body ng-controller="TypeScriptController as TSCtrl">
<helloworld> </helloworld>
</body>
</html>
/////controller class
export class TypeScriptController {
name: string;
place: string;
output: string;
text: string;
helloworld: ng.IDirective;
protected ngModule: ng.IModule = null;
constructor() {
this.name = "Obama";
this.place = "America";
this.text = "welcome";
this.helloworld = this.getCustomDirective();
//how can link this helloworld directive to the html
}
getCustomDirective(): ng.IDirective {
return {
restrict: 'E',
replace: true,
controller: [TypeScriptController],
controllerAs: "TSCtrl",
//templateUrl: "first.html"
template: '<h1>{{TSCtrl.place}}</h1>'
};
}
}
angular.element(document).ready(() => {
var main: TypeScriptController = new TypeScriptController();
});
How can I link the helloworld directive the html. I don't have a "ng-app" name to do something like..
angular.module('myApp').directive('myDirective', myDirective);
I want to register the directive from inside the class not outside it..I want to create module or something similar inside the class and then use it to register the directive.
How can I link these two.
Not without creating an angular.module. Controllers are looked up from window but directive's are not. Also if you don't have an ng-app (or bootstrap) then Angular will not do directive tag -> directive transform for that section of html.
I am trying to learn about angular Directives and following the example given in here (http://docs.angularjs.org/guide/directive), have written the below code. Could anyone please guide me as what am i doing wrong that the data from the scope of the controller is not being read in the directive? The site says nothing about it! And there is no error upon executing the code, it just does not display any data. Please help.
//My Html
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>Angular Directives</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<div data-ng-controller = "MyCtrl"></div>
<div data-template-expanding-directive></div>
<script src="lib/angular.js"></script>
<script src="js/templateExpandingDirective.js"></script>
</body>
</html>
//My JS
'use strict';
var myapp = angular.module('MyApp',[]);
myapp.controller('MyCtrl',['$scope',function($scope){
$scope.customer = {
name: "Jenny",
place: "England"
};
}])
.directive('templateExpandingDirective',function(){
return {
template: 'Name: {{customer.name}}'
};
});
Regards
The directive is currently out of controller scope. So you need to have directive inside the controller scope. The html should be like this -
<div data-ng-controller = "MyCtrl">
<div data-template-expanding-directive></div>
</div>
If you do not move the directive element inside the controller div element then you can either have one more parent 'div' element or access the data from global root scope.