Matt is correct, use any framework you like, but take time to learn pros and cons. You can have a Razor template with an embedded Cesium widget (and I've worked on such an app myself), just with the understanding that if you navigate away from the page, the widget is deallocated, so the user "loses their place" on the map. AngularJS I've not worked with, but looks similar to Knockout which Cesium uses for its own UI hookup. This kind of client-side UI hookup is useful if you will have controls on the page that manipulate the widget or its contents, without navigating away.
EDIT: Added a sample of the Angular "TODO" demo app in front of the Cesium globe, to demonstrate that the frameworks can coexist.
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationHelpButton: false, animation: false, timeline: false
});
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) { todoList.todos.push(todo); }
});
};
});
html, body, #cesiumContainer {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
.done-true {
text-decoration: line-through;
color: grey;
}
.controls {
position: absolute;
top: 5px;
left: 8px;
background-color: rgba(42, 42, 42, 0.7);
padding: 5px 8px;
color: #edffff;
}
<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<div id="cesiumContainer"></div>
<div class="controls" ng-app="todoApp">
<h2>AngularJS Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</div>